:root {
  --bg: #f7f8fa;
  --fg: #1f2937;
  --muted: #6b7280;
  --accent: #1f4e79;
  --accent-light: #e6f0fa;
  --border: #d8dde6;
  --green: #047857;
  --red: #b91c1c;
  --orange: #b45309;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
               sans-serif;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
}

header {
  background: var(--accent);
  color: white;
  padding: 0;
}
header > .topbar,
header > nav {
  padding: 0.5rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}
header nav.nav-main,
header nav {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
header nav.nav-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255,255,255,0.1);
}
header nav.nav-admin .nav-admin__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
header nav.nav-admin .nav-admin__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-right: 0.2rem;
  cursor: help;
}
header nav.nav-admin .nav-admin__group--future .nav-admin__label { color: #fde68a; }
header nav.nav-admin .nav-admin__group--tools  .nav-admin__label { color: #fca5a5; }
header nav.nav-admin .nav-admin__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.22);
  margin: 0.15rem 0.5rem;
}
header .topbar--admin {
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
}
header .topbar__left { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
header .topbar__label { opacity: 0.8; }
header .topbar__form { display: inline-flex; gap: 0.2rem; margin: 0; }
header .topbar__btn {
  padding: 0.15rem 0.55rem;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  color: white;
  border-radius: 3px;
}
header .topbar__btn:hover { background: rgba(255,255,255,0.18); }
header .topbar__btn.is-active {
  background: rgba(255,255,255,0.85);
  color: var(--accent);
  border-color: white;
  font-weight: 600;
}
header .topbar__hint {
  opacity: 0.75; font-style: italic; font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.1rem 0.5rem; border-radius: 3px;
}
header .topbar__user { font-size: 0.85rem; opacity: 0.95; }
header .topbar__user a { text-decoration: underline; }
header .nav-left  { justify-self: start; display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
header .nav-right { justify-self: end;   display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
header .nav-search {
  justify-self: stretch;
  width: 100%;
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}
header .nav-tab { white-space: nowrap; }
header .nav-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  background: rgba(255,255,255,0.92);
  color: var(--fg);
  font-family: inherit;
}
header .nav-search__submit {
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
}
header .nav-search input[type="search"]:focus {
  outline: 2px solid white;
  background: white;
}
header .brand { font-weight: 600; font-size: 1.1rem; }
header a { color: white; text-decoration: none; }
header a:hover { text-decoration: underline; }
header .nav-tab {
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.95rem;
}
header .nav-tab.active {
  background: rgba(255,255,255,0.18);
  text-decoration: none;
}
header .env-tag {
  font-size: 0.85rem;
  opacity: 0.8;
  font-style: italic;
}

main {
  max-width: 1400px;
  margin: 1.5rem auto;
  padding: 0 1.5rem;
}

footer {
  border-top: 1px solid var(--border);
  margin: 3rem 0 1rem;
  padding: 1rem 1.5rem;
  text-align: center;
  color: var(--muted);
}

h1 { color: var(--accent); margin-top: 0; }
h1 small, h2 small { color: var(--muted); font-weight: normal; }
h2 { margin-top: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; }

p.lead { color: var(--muted); }

/* KPIs */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.kpi {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.kpi .num { font-size: 1.4rem; font-weight: 600; color: var(--accent); }
.kpi.big .num { font-size: 1.8rem; }
.kpi .lbl { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }

/* tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
th, td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}
tr:hover td { background: #fafbfd; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.expected-info {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: text-bottom;
}
.expected-tooltip {
  position: fixed;
  z-index: 10000;
  width: max-content;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: 0.55rem 0.65rem;
  border-radius: 4px;
  background: #111827;
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: pre-line;
  pointer-events: none;
}
.total-row td { font-weight: 600; border-top: 2px solid var(--accent); background: var(--accent-light); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: #eef1f6;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
a { color: var(--accent); }

/* form */
form input[type="search"] {
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
}
form button {
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
}
form button:hover { background: #163a5e; }

/* details/summary */
details.order-block {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.6rem;
  padding: 0;
}
details.order-block > summary {
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-weight: 600;
  background: var(--accent-light);
  border-radius: 6px 6px 0 0;
}
details.order-block > summary .meta {
  margin-left: 1rem;
  color: var(--muted);
  font-weight: normal;
  font-size: 0.85rem;
}
details.order-block[open] > summary { border-bottom: 1px solid var(--border); }
details.order-block table { margin: 0; border-radius: 0 0 6px 6px; }

/* status pills */
.status-ok      { color: var(--green); font-weight: 600; }
.status-running { color: var(--orange); }
.status-error   { color: var(--red); font-weight: 600; }
.status-partial { color: var(--orange); }

/* margin-delta colouring */
.kpi.pos .num, .num.pos { color: var(--green); }
.kpi.neg .num, .num.neg { color: var(--red); }

/* key-value list */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.2rem; margin: 0.5rem 0; }
dl.kv dt { font-weight: 600; color: var(--muted); }
dl.kv dd { margin: 0; }

/* login */
.login-container {
  max-width: 480px;
  margin: 3rem auto;
  background: white;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.login-container h1 { margin-top: 0; }
.login-container form { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.5rem 0; }
.login-container label { font-weight: 600; color: var(--muted); font-size: 0.9rem; }
.login-container input[type="email"] {
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.login-container button { padding: 0.7rem; font-size: 1rem; }
.alert { padding: 0.75rem 1rem; border-radius: 4px; margin: 1rem 0; }
.alert-ok    { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warn-billing {
  background: #fffbeb;
  color: #78350f;
  border: 1px solid #fde68a;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.btn-verify[disabled] {
  background: #d1d5db;
  cursor: not-allowed;
  opacity: 0.7;
}
.btn-verify[disabled]:hover { background: #d1d5db; }
.small { font-size: 0.85rem; }
.user-info { font-size: 0.9rem; opacity: 0.95; }
.user-info a { text-decoration: underline; }

/* Mobile/narrow-viewport — laat nav-grid stacken ipv 3-koloms naast elkaar */
@media (max-width: 640px) {
  header nav.nav-main,
  header nav {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  header .nav-left,
  header .nav-right {
    justify-self: stretch;
    flex-wrap: wrap;
  }
  header .nav-search {
    order: 2;  /* search-balk onder brand voor mobile */
  }
  header .user-info {
    font-size: 0.8rem;
  }
  header .topbar--admin {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }
  header nav.nav-admin { padding: 0.4rem 0.7rem; }
  header nav.nav-admin .nav-admin__sep { display: none; }
  header nav.nav-admin .nav-admin__group { width: 100%; }
  /* Tabellen scrollable horizontaal */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  /* KPIs stacken naast elkaar voor scrolling */
  .kpis { grid-template-columns: 1fr 1fr; }
  /* Filter-bar: labels stacken */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar label { width: 100%; }
  main { padding: 0 0.7rem; }
}

/* filter bar (orders_list) */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 1rem 0 0.6rem;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: end;
}
.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}
.filter-bar label > span { color: var(--muted); font-weight: 600; }
.filter-bar label.checkbox-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.35rem;  /* baseline-align with select inputs */
}
.filter-bar label.checkbox-inline > span {
  color: var(--fg);
  font-weight: normal;
}

/* Invoices dashboard — KPI grid + charts + match-pct */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
  margin: 1rem 0 1.5rem;
}
.kpi-tile {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.kpi-tile__n {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.kpi-tile__lbl {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}
.kpi-tile--accent { border-left: 4px solid var(--accent); }
.kpi-tile__n--ok  { color: #065f46; }
.kpi-tile__n--mid { color: #92400e; }
.kpi-tile__n--low { color: #991b1b; }

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
@media (max-width: 900px) {
  .chart-row { grid-template-columns: 1fr; }
}
.chart-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.chart-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--accent);
}

.match-pct {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
.match-pct--ok  { background: #d1fae5; color: #065f46; }
.match-pct--mid { background: #fef3c7; color: #92400e; }
.match-pct--low { background: #fee2e2; color: #991b1b; }

/* Action-board — gamified coverage progress + shortlist */
.action-board {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 0.5rem 0 1rem;
}
.action-board h2 { color: #92400e; }
.action-board__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.4rem;
}
@media (max-width: 900px) {
  .action-board__row { grid-template-columns: 1fr; }
}
.action-board__col {
  background: white;
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(0,0,0,0.05);
}
.action-board__label {
  font-weight: 600;
  font-size: 1rem;
  color: #1f4e79;
  margin-bottom: 0.4rem;
}
.action-board__label small { font-weight: normal; color: var(--muted); font-size: 0.8em; }
.action-board__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 0;
}
.action-board__bar {
  flex: 1;
  height: 18px;
  background: #f3f4f6;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.action-board__fill {
  height: 100%;
  transition: width 0.3s ease;
  background: #f59e0b;
}
.action-board__pct {
  font-size: 1.1rem;
  font-weight: 700;
  color: #92400e;
  min-width: 50px;
  text-align: right;
}
.action-board__stats { font-size: 0.85rem; color: var(--fg); margin-top: 0.2rem; }
.action-board__hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.4; }
.action-board__hint a { font-weight: 600; }
.action-board__details { margin-top: 0.7rem; }
.action-board__details summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: #92400e;
  font-weight: 600;
  user-select: none;
}
.action-board__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.82rem;
}
.action-board__lists h4 { margin: 0 0 0.3rem; color: var(--accent); font-size: 0.85rem; }
.action-board__lists ul { margin: 0; padding-left: 1.2rem; max-height: 280px; overflow-y: auto; }
.action-board__lists li { margin: 0.1rem 0; }

/* All-complete celebratory state — green-tinted action board */
.action-board--complete {
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
  border-color: #34d399;
}
.action-board--complete h2 { color: #065f46; }
.action-board--complete .action-board__pct { color: #065f46; }
.action-board--complete .action-board__details summary { color: #065f46; }

/* Per-cell OK state — when an individual carrier hits 100% */
.action-board__col--ok .action-board__pct { color: #065f46; }

/* Anomaly-section — operationele issues (retour/adres) bovenop pattern-section */
.anomaly-section {
  background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 0.8rem 0 1rem;
}
.anomaly-section > h2 { color: #991b1b; margin: 0 0 0.4rem; }
.anomaly-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  margin: 0.4rem 0;
}
.anomaly-card[open] { background: #fffafa; }
.anomaly-card > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.92rem;
}
.anomaly-card > summary::-webkit-details-marker { color: #991b1b; }

/* Batch-section — admin-goedgekeurde anomaly-batches die wachten op KS-actie.
   Groen want het is een "ready to action" lijst, niet een alarm. */
.batch-section {
  background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 0.8rem 0 1rem;
}
.batch-section > h2 { color: #14532d; margin: 0 0 0.4rem; }
.batch-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  margin: 0.4rem 0;
}
.batch-card[open] { background: #f7fef9; }
.batch-card > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.92rem;
}
.batch-card > summary::-webkit-details-marker { color: #14532d; }
.batch-order-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0;
  display: grid;
  gap: 0.25rem;
}
.batch-order-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9rem;
}
.batch-order-row--done { background: #ecfdf5; opacity: 0.85; }
.batch-check { font-weight: bold; color: #14532d; width: 1rem; text-align: center; }
.batch-check--open { color: #b45309; }
.batch-action-tag {
  background: #d1fae5;
  color: #065f46;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-family: monospace;
}
.batch-kind-tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
}
.batch-kind-tag--anomaly { background: #fee2e2; color: #991b1b; }
.batch-kind-tag--pattern { background: #eef2ff; color: #312e81; }

/* In-row category-tag (Categorie-kolom in orders-tabel) */
.cat-tag {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.cat-tag--anomaly { background: #fee2e2; color: #991b1b; }
.cat-tag--pattern { background: #eef2ff; color: #312e81; }

/* Nazending-link banner (order_detail bovenaan) */
.filter-bar-details {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  margin: 0.6rem 0;
  background: #f8fafc;
}
.filter-bar-details summary {
  cursor: pointer;
  font-weight: 500;
  color: #475569;
  padding: 0.2rem 0;
}
.filter-bar-details[open] summary { margin-bottom: 0.4rem; }

.nazending-link-banner {
  background: #eef2ff;
  border-left: 3px solid #6366f1;
  padding: 0.55rem 0.8rem;
  border-radius: 4px;
  margin: 0.6rem 0 0.8rem;
  font-size: 0.93rem;
}

/* Follow-up card (order_detail, na action-card) */
.followup-card {
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 0.8rem 0 1rem;
  border: 1px solid;
}
.followup-card--open { background: #fffbeb; border-color: #fbbf24; }
.followup-card--done { background: #ecfdf5; border-color: #86efac; }
.followup-form { display: flex; flex-direction: column; gap: 0.7rem; }
.followup-fase {
  background: white;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}
.followup-fase strong { font-size: 0.85rem; color: #475569; }
.followup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.4rem 0.6rem;
  margin: 0.4rem 0;
  font-size: 0.88rem;
}
.followup-grid label { display: flex; flex-direction: column; gap: 0.15rem; }
.followup-grid label.full { grid-column: 1 / -1; }
.followup-grid input[type="text"],
.followup-grid input[type="date"],
.followup-grid input[type="number"],
.followup-grid select {
  padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 3px;
}
.followup-grid .checkbox-inline { flex-direction: row; align-items: center; gap: 0.3rem; }
.followup-form .full label { display: block; }
.followup-form label.full {
  display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.88rem;
}
.followup-actions { margin-top: 0.4rem; }
.cs-cta-link { color: #92400e; }

.auto-verify-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  margin: 0.6rem 0 0.8rem;
  font-size: 0.9rem;
}
.auto-verify-card span { flex:1; min-width:18rem; }

/* Order-detail action-card (per-order KS-actie picker) */
.action-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0 1rem;
}
.action-card--open { background: #fff7ed; border-color: #fdba74; }
.action-card--done { background: #ecfdf5; border-color: #86efac; }
.action-card .action-tag {
  background: #d1fae5;
  color: #065f46;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.92rem;
}

/* Pattern-detection section op /orders */
.pattern-section {
  background: linear-gradient(135deg, #eef2ff 0%, #f1f5ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 0.8rem 0 1.2rem;
}
.pattern-section > h2 { color: #312e81; margin: 0 0 0.4rem; }
.pattern-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  margin: 0.4rem 0;
}
.pattern-card[open] { background: #fbfcff; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.pattern-card > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.92rem;
}
.pattern-card > summary::-webkit-details-marker { color: var(--accent); }
.pattern-meta { margin-left: auto; font-size: 0.85rem; color: var(--muted); }
.pattern-tags { font-size: 0.78rem; color: var(--muted); font-style: italic; }
.legacy-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e5e7eb;
  color: #4b5563;
  padding: 0.08rem 0.4rem;
  border-radius: 3px;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.pattern-body {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.pattern-form { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pattern-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: end;
}
.pattern-form__row label { font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; }
.pattern-form__row label.grow { flex: 1; min-width: 250px; }
.pattern-form__row label.grow input[type="text"] { width: 100%; }
.pattern-form select, .pattern-form input[type="text"], .pattern-form input[type="number"] {
  padding: 0.35rem 0.5rem;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
}
.pattern-form .btn-primary {
  align-self: flex-start;
  padding: 0.45rem 0.9rem;
  background: #1f4e79;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}
.pattern-form .btn-primary:hover { background: #163a5e; }

/* Routes-table — compact per-carrier-route met match-% + suggested-source */
.routes-table td { font-size: 0.85rem; vertical-align: middle; }
.routes-table td small { font-size: 0.75rem; }

/* Gap-detectie heatmap */
.gap-row { margin: 1rem 0 1.5rem; }
.gap-row h3 {
  margin: 0.5rem 0 0.4rem;
  font-size: 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
}
.gap-summary { font-size: 0.85rem; color: var(--muted); font-weight: normal; }
.gap-heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0.4rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.gap-cell {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  cursor: help;
}
.gap-cell--covered { background: #16a34a; }
.gap-cell--missing { background: #dc2626; }
.gap-cell--empty   { background: #e5e7eb; }
.gap-cell--month {
  width: auto;
  height: auto;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  color: white;
  font-family: ui-monospace, monospace;
}
.gap-cell--month.gap-cell--empty { color: #6b7280; }

.gap-details { margin-top: 0.5rem; font-size: 0.85rem; }
.gap-details summary { cursor: pointer; color: var(--accent); }
.gap-list { margin: 0.3rem 0 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.gap-list li { margin: 0.1rem 0; break-inside: avoid; }

/* page-sub (H1 subtitle) */
.page-sub {
  font-weight: normal;
  color: var(--muted);
  font-size: 0.75em;
}

/* howto-callout — 3 stappen-uitleg bovenaan actionable views */
.howto {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
  padding: 0.7rem 1rem;
  margin: 0.8rem 0;
  font-size: 0.9rem;
}
.howto > strong { display: block; margin-bottom: 0.4rem; color: #1e40af; font-size: 0.95rem; }
.howto ol { margin: 0; padding-left: 1.4rem; }
.howto ol li { margin: 0.25rem 0; line-height: 1.45; padding-left: 0.15rem; }
.howto ol li::marker { color: #1e40af; font-weight: 600; }
.howto li strong { color: #1e40af; font-weight: 600; }
.hint-swatch {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 0.78rem;
  border: 2px solid;
  margin: 0 0.1rem;
}
.hint-swatch--claim    { border-color: #dc2626; }
.hint-swatch--checkout { border-color: #f59e0b; }
.hint-swatch--wait     { border-color: #eab308; }
.hint-swatch--early    { border-color: #9ca3af; }

/* Breadcrumb — toont op admin-pages waar je vandaan kwam via nav */
.breadcrumb {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0.4rem 0 0.8rem;
  padding: 0.35rem 0.7rem;
  background: #f1f5f9;
  border-radius: 4px;
  border-left: 3px solid #6366f1;
}
.breadcrumb a {
  color: #1e3a8a;
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep {
  margin: 0 0.35rem;
  color: #94a3b8;
}
.breadcrumb__current {
  color: #0f172a;
  font-weight: 600;
}

/* Mark-form (order-detail: 2 onafhankelijke keuzes) */
.mark-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 44rem;
}
.mark-option {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.55rem 0.8rem 0.7rem;
  background: #f8fafc;
  margin: 0;
}
.mark-option > legend {
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0 0.4rem;
  color: #1e3a8a;
}
.mark-option__num {
  display: inline-block;
  font-size: 1.05rem;
  color: #6366f1;
  margin-right: 0.15rem;
}
.mark-radio {
  display: block;
  padding: 0.18rem 0;
  font-size: 0.92rem;
  cursor: pointer;
}
.mark-radio input { margin-right: 0.4rem; }
.mark-note {
  display: block;
  font-size: 0.9rem;
}
.mark-note > input[type=text] {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
}

/* Action-quickset (compact 2-control form in orders-list rows) */
.action-td { min-width: 220px; }
.action-quickset__select {
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
  border: 2px solid var(--border, #d1d5db);
  border-radius: 4px;
  background: white;
  color: #374151;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.action-quickset__select:hover { background: #f9fafb; }

/* Two-control compact form: ① KS-actie + ② Checkout-fix-nodig */
.action-quickset--two {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 0.4rem 0.5rem;
}
.action-quickset__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
}
.action-quickset__label > .action-quickset__select {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  padding: 0.3rem 0.4rem;
  font-weight: 500;
}
.action-quickset__check {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.2rem 0;
  line-height: 1.25;
}
.action-quickset__check > input { margin-top: 0.15rem; }
.action-quickset__btn {
  font-size: 0.78rem;
  padding: 0.32rem 0.55rem;
  align-self: flex-start;
  margin-top: 0.15rem;
}
/* Border-kleur = urgentie-hint o.b.v. systeem-suggestie */
.action-quickset__select--claim    { border-color: #dc2626; }   /* rood — direct credit-claim */
.action-quickset__select--checkout { border-color: #f59e0b; }   /* amber — checkout-patroon */
.action-quickset__select--wait     { border-color: #eab308; }   /* geel — wacht op factuur */
.action-quickset__select--early    { border-color: #9ca3af; }   /* grijs — te vroeg */
.action-quickset__select--ok       { border-color: #d1d5db; }   /* lichtgrijs — geen actie nodig */

/* Action-chip + KPI-strip + tier-toggle (orders_list actionable view) */
.kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0.8rem;
}
.kpi-strip__cell {
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.8rem;
  min-width: 120px;
}
.kpi-strip__n {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}
.kpi-strip__lbl {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.kpi-strip__cell--claim    { border-left: 3px solid #dc2626; }
.kpi-strip__cell--checkout { border-left: 3px solid #f59e0b; }
.kpi-strip__cell--wait     { border-left: 3px solid #eab308; }
.kpi-strip__cell--early    { border-left: 3px solid #9ca3af; }
.kpi-strip__cell--done     { border-left: 3px solid #16a34a; }
.kpi-strip__cell--ok       { border-left: 3px solid #d1d5db; }

.tier-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin: 0.4rem 0 0.6rem;
  font-size: 0.85rem;
}
.tier-toggle__label { color: var(--muted); font-weight: 600; margin-right: 0.4rem; }
.tier-toggle__sep   { color: var(--muted); margin: 0 0.2rem; }
.tier-toggle__btn {
  padding: 0.25rem 0.6rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: white;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.82rem;
}
.tier-toggle__btn:hover { background: var(--accent-light); text-decoration: none; }
.tier-toggle__btn.is-active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.action-cell { font-size: 0.8rem; }
.action-cell summary { cursor: pointer; list-style: none; }
.action-cell summary::-webkit-details-marker { display: none; }
.action-chip {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.action-chip--claim    { background: #fee2e2; color: #991b1b; }
.action-chip--checkout { background: #fef3c7; color: #92400e; }
.action-chip--wait     { background: #fef9c3; color: #854d0e; }
.action-chip--early    { background: #f3f4f6; color: #4b5563; }
.action-chip--done     { background: #dcfce7; color: #14532d; }
.action-chip--ok       { background: #f9fafb; color: #6b7280; font-weight: normal; }

.action-form {
  margin-top: 0.4rem;
  padding: 0.5rem;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.action-form select,
.action-form input[type="text"] {
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: inherit;
}
.action-form__btns { display: flex; gap: 0.5rem; align-items: center; }
.action-form__btns .btn-primary {
  padding: 0.3rem 0.7rem; font-size: 0.85rem;
  background: var(--accent); color: white; border: none; border-radius: 4px;
  cursor: pointer;
}
.action-form__btns .btn-primary:hover { background: var(--accent-dark, #1e40af); }

/* Verzendkosten-uitlijning KPI's (top van /) — beide naar €0 */
.kpi-alignment-block {
  margin: 1rem 0 0.8rem;
  padding: 0.7rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafafa;
}
.kpi-alignment-block__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.kpi-alignment-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.7rem;
  margin: 0 0 0.5rem;
}
.kpi-alignment-why { font-size: 0.85rem; cursor: pointer; }
.kpi-alignment-why summary { color: #475569; }
.kpi-drill-link {
  font-weight: 600;
  text-decoration: none;
  padding: 0 0.2rem;
  border-radius: 3px;
}
.kpi-alignment-card--loss .kpi-drill-link { color: #991b1b; }
.kpi-alignment-card--loss .kpi-drill-link:hover { background: #fee2e2; }
.kpi-alignment-card--over .kpi-drill-link { color: #92400e; }
.kpi-alignment-card--over .kpi-drill-link:hover { background: #fef3c7; }
.kpi-alignment-card {
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  border: 1px solid;
}
.kpi-alignment-card--loss { background: #fef2f2; border-color: #fca5a5; }
.kpi-alignment-card--over { background: #fffbeb; border-color: #fcd34d; }
.kpi-alignment-card--meta { background: #f1f5f9; border-color: #cbd5e1; }
.kpi-alignment-card__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  margin-bottom: 0.2rem;
}
.kpi-alignment-card__value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi-alignment-card--loss .kpi-alignment-card__value { color: #991b1b; }
.kpi-alignment-card--over .kpi-alignment-card__value { color: #92400e; }
.kpi-alignment-card__value-small {
  font-size: 1.05rem;
  line-height: 1.3;
  color: #0f172a;
}
.kpi-alignment-card__sub {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 0.2rem;
}

/* default landing banner */
.default-landing-banner {
  background: linear-gradient(90deg, rgba(255,165,0,0.10), rgba(255,165,0,0.02));
  border-left: 3px solid var(--orange, #f59e0b);
  padding: 0.8rem 1rem;
  margin: 1rem 0 0.8rem;
  border-radius: 4px;
  font-size: 0.9rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.default-landing-banner__main {
  flex: 1;
  min-width: 280px;
}
.default-landing-banner__desc {
  display: block;
  margin-top: 0.2rem;
  color: var(--fg);
}
.default-landing-banner__btn {
  display: inline-block;
  background: white;
  border: 1px solid var(--orange, #f59e0b);
  color: var(--orange, #f59e0b);
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
  cursor: pointer;
}
.default-landing-banner__btn:hover {
  background: var(--orange, #f59e0b);
  color: white;
  text-decoration: none;
}
.filter-bar input[type="date"],
.filter-bar select {
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  background: white;
}
.filter-bar .filter-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-left: auto;
}
.filter-bar button { font-size: 0.9rem; }
.btn-link {
  background: none;
  border: none;
  color: #1e40af;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.btn-link:hover { color: #1e3a8a; text-decoration: none; }
.filter-summary {
  margin: 0.4rem 0;
  padding: 0.4rem 0.7rem;
  background: var(--accent-light);
  border-radius: 4px;
  font-size: 0.9rem;
}
.filter-summary code { background: white; }

/* breadcrumb */
.breadcrumb {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.breadcrumb a { color: var(--accent); }

/* verification badges + card */
.badge-verified, .badge-unverified {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.55;
}
.badge-verified {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.badge-verified.large {
  font-size: 0.95rem;
  padding: 0.2em 0.7em;
}
.badge-unverified {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.verification-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 6px;
  margin: 0.6rem 0 1rem;
  border: 1px solid var(--border);
}
.verification-card.is-verified  { background: #ecfdf5; border-color: #a7f3d0; }
.verification-card.not-verified { background: #fffbeb; border-color: #fde68a; }
.verification-card .verification-status { flex: 1; }
.verification-card .verification-status p { margin: 0.4rem 0 0; font-size: 0.9rem; }
.verification-card form { margin: 0; }
.btn-verify {
  background: var(--green);
  color: white;
  border: 0;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}
.btn-verify:hover { background: #036649; }
.btn-unverify {
  background: white;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-unverify:hover { background: #fef2f2; }

.badge-category {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
  line-height: 1.55;
}
.badge-category.large { font-size: 0.95rem; padding: 0.2em 0.7em; }
.badge-suggestion {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}

.verification-card.category-card.is-verified  { background: #eff6ff; border-color: #bfdbfe; }
.verification-card.category-card.has-suggestion { background: #fff7ed; border-color: #fed7aa; }
.verification-card .verification-status h3 {
  margin: 0;
  font-size: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.verification-card .category-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}
.verification-card .category-manual-form {
  display: flex;
  gap: 0.4rem;
}
.verification-card .category-manual-form select {
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-family: inherit;
}
.btn-secondary {
  background: white;
  color: #111827;
  border: 1px solid #6b7280;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-secondary:hover { background: #f3f4f6; color: #000; border-color: #111827; }
.btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
}
.btn-primary:hover {
  background: #163a5e;
  border-color: #163a5e;
  color: #fff;
}
.dashboard-workstart {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  margin: 0.75rem 0 1rem;
  padding: 1rem 1.1rem;
}
.dashboard-workstart__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}
.dashboard-workstart h1,
.dashboard-workstart h2,
.dashboard-workstart p {
  margin: 0;
}
.dashboard-workstart h1 {
  font-size: 1.25rem;
}
.dashboard-workstart p {
  color: #475569;
  margin-top: 0.25rem;
}
.dashboard-workstart__count {
  min-width: 8rem;
  text-align: right;
}
.dashboard-workstart__count strong {
  color: var(--accent);
  display: block;
  font-size: 1.8rem;
  line-height: 1;
}
.dashboard-workstart__count span {
  color: #64748b;
  font-size: 0.82rem;
}
.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding-top: 0.85rem;
}
.dashboard-action-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
  padding: 0.8rem;
}
.dashboard-action-card--primary {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.dashboard-action-card__label {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}
.dashboard-action-card h2 {
  font-size: 1rem;
}
.dashboard-action-card p {
  font-size: 0.9rem;
  min-height: 2.4rem;
}
.dashboard-action-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}
.dashboard-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.05rem;
  text-decoration: none;
}
@media (max-width: 1000px) {
  .dashboard-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .dashboard-workstart__head,
  .dashboard-action-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-workstart__count {
    text-align: left;
  }
}

/* "Hoe verifieer ik dit?"-stappenplan */
details.howto {
  margin-top: 0.6rem;
  background: rgba(255,255,255,0.55);
  border: 1px dashed var(--border);
  border-radius: 4px;
}
details.howto > summary {
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent);
}
details.howto[open] > summary { border-bottom: 1px dashed var(--border); }
details.howto > ol, details.howto > p {
  margin: 0.5rem 1rem 0.7rem 2.2rem;
  font-size: 0.88rem;
}
details.howto code {
  word-break: break-all;
}

/* external-link chips (Sendy, GG, …) */
.ext-link {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05em 0.45em;
  border-radius: 3px;
  font-size: 0.78rem;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}
.ext-link.sendy-link {
  background: #fff3ed;
  color: #b45309;
  border: 1px solid #fed7aa;
}
.ext-link.sendy-link:hover { background: #ffe5d2; text-decoration: none; }

/* ─── Retouren-registratie (/returns) ─────────────────────────────────── */
.returns-form {
  margin: 1rem 0 1.5rem;
  padding: 0.8rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.returns-form__row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.returns-form__input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}
.returns-form__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.returns-form__notes {
  width: 100%;
  padding: 0.4rem 0.6rem;
  margin-top: 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 0.9rem;
}
.returns-filter {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.returns-tab {
  padding: 0.35rem 0.8rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  text-decoration: none;
  color: var(--fg);
  background: #fff;
  font-size: 0.9rem;
}
.returns-tab.is-active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.returns-tab__n { opacity: 0.8; font-size: 0.85em; }
.returns-search { margin-left: auto; }
.returns-search input[type=search] {
  padding: 0.35rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  min-width: 240px;
}
.returns-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.returns-table th, .returns-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}
.returns-table th { background: #f1f5f9; font-weight: 600; }
.returns-row--needs_link { background: #fffbeb; }
.returns-row--verwerkt { color: #64748b; }
.returns-row__raw code {
  background: #f1f5f9; padding: 0.1rem 0.35rem; border-radius: 3px;
  font-size: 0.88rem;
}
.returns-row__actions { white-space: nowrap; }
.chip {
  display: inline-block; padding: 0.05rem 0.45rem;
  background: #e0e7ff; color: #3730a3; border-radius: 3px;
  font-size: 0.75rem;
}
.chip--manual { background: #fef3c7; color: #92400e; }
.chip--tracking_code { background: #ddd6fe; color: #5b21b6; }
.chip--gg_external_id { background: #d1fae5; color: #065f46; }
.btn-inline {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  margin: 0 0.1rem;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 3px;
  color: var(--fg);
}
.btn-inline:hover { background: #f1f5f9; }
.btn-inline--ok { color: #065f46; border-color: #6ee7b7; }
.btn-inline--ok:hover { background: #d1fae5; }
.btn-inline--danger { color: #991b1b; border-color: #fca5a5; }
.btn-inline--danger:hover { background: #fee2e2; }
.returns-link-popover { display: inline-block; position: relative; }
.returns-link-popover summary { list-style: none; }
.returns-link-popover summary::-webkit-details-marker { display: none; }
.returns-link-form {
  display: flex; gap: 0.3rem;
  position: absolute; right: 0; top: 100%; z-index: 10;
  background: #fff; padding: 0.4rem; border: 1px solid #cbd5e1;
  border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-top: 0.2rem;
}
.returns-link-form input { padding: 0.25rem 0.4rem; font-family: ui-monospace, monospace; }
.pagination { margin: 1rem 0; display: flex; gap: 1rem; align-items: center; }

/* ─── Orders-lijst per-row toggle-knoppen (KS-fix / Checkout-fix) ───
   Sinds 2026-05-13 binary refactor — vervangt action-quickset dropdown. */
.row-marks {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: stretch;
}
.row-mark-form { margin: 0; }
.row-mark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid transparent;
  text-align: center;
}
/* Aan-state: gekleurd, kleiner formaat, grijze X erin */
.row-mark-btn--on.row-mark-btn--ks  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.row-mark-btn--on.row-mark-btn--web { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.row-mark-btn--on:hover { filter: brightness(0.96); }
.row-mark-btn--on .row-mark-btn__x {
  color: #6b7280;
  font-weight: 700;
  padding: 0 0.25rem;
  border-left: 1px solid currentColor;
  opacity: 0.55;
  margin-left: 0.2rem;
}
/* Uit-state: outlined primary action — markeer */
.row-mark-btn--off.row-mark-btn--ks {
  background: white;
  color: #92400e;
  border-color: #fcd34d;
  font-weight: 500;
}
.row-mark-btn--off.row-mark-btn--web {
  background: white;
  color: #3730a3;
  border-color: #a5b4fc;
  font-weight: 500;
}
.row-mark-btn--off:hover {
  background: #f9fafb;
}
.row-mark-meta {
  margin-top: 0.35rem;
  line-height: 1.3;
}

/* ─── Order-detail 2-koloms layout (2026-05-13) ──────────────────── */
/* Main-data links (~60%), afgeleid + workflow rechts (~40%).
   Mobile (< 720px): stackt naar single column, main eerst. */

.kpi-strip-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem;
  margin: 0.5rem 0 1.25rem;
}
.order-action-center {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  margin: 0.75rem 0 1rem;
  padding: 1rem 1.1rem;
}
.order-action-center__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}
.order-action-center h2,
.order-action-center h3,
.order-action-center p {
  margin: 0;
}
.order-action-center h2 {
  font-size: 1.2rem;
}
.order-action-center p {
  color: #475569;
  margin-top: 0.25rem;
}
.order-action-center__status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}
.order-action-center__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  padding-top: 0.85rem;
}
.order-action-group {
  min-width: 0;
}
.order-action-group h3 {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}
.order-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.order-action-row form {
  margin: 0;
}
.action-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.05rem;
  text-decoration: none;
}
.ks-deliverable-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 0;
}
.ks-deliverable-panel h3 {
  color: #334155;
  font-size: 0.98rem;
  margin: 0 0 0.25rem;
}
.ks-deliverable-panel p {
  margin: 0.35rem 0;
}
.ks-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 3px solid #f97316;
  border-radius: 4px;
  color: #7c2d12;
  padding: 0.45rem 0.6rem;
}
.ks-helper-grid {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.ks-helper-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem;
}
.ks-helper-card--warn {
  background: #fffbeb;
  border-color: #fbbf24;
}
.ks-helper-card span,
.ks-helper-card small {
  color: #475569;
}
.ks-deliverable-form {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}
.ks-deliverable-form label {
  color: #64748b;
  display: grid;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 0.25rem;
}
.ks-deliverable-form select,
.ks-deliverable-form textarea {
  border: 1px solid var(--border);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--text);
  font: inherit;
  padding: 0.45rem 0.55rem;
  width: 100%;
}
.ks-deliverable-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  resize: vertical;
}
.ks-deliverable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
@media (max-width: 900px) {
  .order-action-center__head,
  .order-action-center__grid,
  .ks-deliverable-panel {
    grid-template-columns: 1fr;
  }
  .order-action-center__status {
    justify-content: flex-start;
  }
}
.kpi-tile {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
}
.kpi-tile__n {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
}
.kpi-tile__n.muted { color: var(--muted); }
.kpi-tile__lbl {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.25rem;
}
.kpi-tile--delta .kpi-tile__n { font-size: 1.45rem; font-weight: 700; }
.kpi-tile--delta.neg { border-left: 4px solid var(--red); }
.kpi-tile--delta.neg .kpi-tile__n { color: var(--red); }
.kpi-tile--delta.pos { border-left: 4px solid var(--green); }
.kpi-tile--delta.pos .kpi-tile__n { color: var(--green); }

/* Aside (order-grid__side) is verwijderd 2026-05-15 — grid is nu single-column
   full-width, lijnt uit met .kpi-strip-top en het KS-blok eronder. */
.order-grid {
  display: block;
}
.order-grid__main { min-width: 0; }

.main-card, .side-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.main-card h2 {
  margin-top: 0;
  font-size: 1.15rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}
.side-card h2 {
  margin-top: 0;
  font-size: 1.05rem;
  border: none;
  padding: 0 0 0.35rem;
  color: var(--accent);
}
.main-card h3, .side-card h3 {
  font-size: 1rem;
  margin: 1rem 0 0.4rem;
}

/* Embedded variants — bestaande .action-card / .verification-card /
   .followup-card / .category-card kwamen voorheen als standalone secties.
   Met .embedded vervalt hun eigen background/border/padding zodat ze
   netjes binnen de side-card-wrapper passen. */
.action-card.embedded, .verification-card.embedded,
.followup-card.embedded, .category-card.embedded {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 720px) {
  .order-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .order-grid__side { order: 2; }
  .kpi-strip-top { grid-template-columns: 1fr 1fr; }
}

/* ─── Labelcheck — match/mismatch rij-kleur ─── */
.lc-row--match  td { background: #f0fdf4; }
.lc-row--zero   td { background: #fef9c3; }
.lc-row--diff   td { background: #fef2f2; }
.lc-trace summary { cursor: pointer; }
.lc-trace__list  { margin: 0.3rem 0; padding-left: 1.2rem; font-size: 0.82rem; }
.lc-trace__list li { margin: 0.15rem 0; }

/* ─── Label-feedback form (in /labelcheck rows + order_detail) ─── */
.lc-feedback summary { cursor: pointer; }
.lc-feedback summary::-webkit-details-marker { display: none; }
.lc-feedback-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  margin-top: 0.3rem;
  min-width: 260px;
}
.lc-feedback-form label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.82rem;
}
.lc-feedback-form input[type=text], .lc-feedback-form input[type=number], .lc-feedback-form select {
  padding: 0.3rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  font-size: 0.85rem;
}

/* ─── Labelcheck-train: rapid-fire training UI ─── */
.train-card { padding: 1.2rem 1.4rem; }
.train-pred {
  background: #fef9c3; padding: 0.6rem 0.9rem;
  border-left: 4px solid #ca8a04; border-radius: 4px;
  margin: 0.5rem 0 1rem; font-size: 0.95rem;
}
.train-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.train-btn {
  min-width: 4.5rem; padding: 0.8rem 1.1rem; font-size: 1.4rem; font-weight: 700;
  border: 2px solid var(--accent); background: white; color: var(--accent);
  border-radius: 8px; cursor: pointer; font-family: inherit;
}
.train-btn:hover { background: var(--accent); color: white; }
.train-btn--submit {
  font-size: 0.95rem; background: var(--accent); color: white; min-width: auto;
  padding: 0.55rem 1rem;
}
.train-btn--anomaly { font-size: 0.95rem; min-width: auto; padding: 0.55rem 1rem;
  border-color: #b91c1c; color: #b91c1c; }
.train-btn--anomaly:hover { background: #b91c1c; color: white; }
.train-btn--skip { font-size: 0.95rem; min-width: auto; padding: 0.55rem 1rem;
  border-color: #6b7280; color: #6b7280; }
.train-btn--skip:hover { background: #6b7280; color: white; }

/* ─── Labelcheck-train upgrade: carrier-matrix bovenaan ─── */
.train-grid {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.4rem 0.6rem;
  align-items: center;
  margin-bottom: 0.8rem;
  padding: 0.6rem;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.train-grid__label { font-weight: 600; }
.train-grid__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.train-grid__btns .train-btn {
  min-width: 3.5rem;
  padding: 0.55rem 0.9rem;
  font-size: 1.1rem;
}
.train-btn--bb {
  border-color: #b45309; color: #b45309;
}
.train-btn--bb:hover { background: #b45309; color: white; }

/* 3-carrier-radio (KS-modus 2026-05-15) — radio-button gestyled als knop. */
.train-radio { position: relative; display: inline-block; cursor: pointer; user-select: none; }
.train-radio__input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.train-radio__lbl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.4rem; padding: .5rem .8rem;
  border: 1.5px solid var(--border); border-radius: 6px;
  background: white; color: var(--fg);
  font-size: 1.05rem; font-weight: 500;
  transition: background .12s, border-color .12s, color .12s;
}
.train-radio:hover .train-radio__lbl { background: #f1f5f9; border-color: var(--accent); }
.train-radio__input:checked + .train-radio__lbl {
  background: var(--accent); color: white; border-color: var(--accent);
  font-weight: 700; box-shadow: 0 0 0 2px rgba(237,137,54,.18);
}
.train-radio--bb .train-radio__lbl { background: #fef3c7; color: #92400e; border-color: #fde047; }
.train-radio--bb:hover .train-radio__lbl { background: #fde68a; border-color: #d97706; }
.train-radio--bb .train-radio__input:checked + .train-radio__lbl {
  background: #d97706; color: white; border-color: #92400e;
}
.train-customer {
  background: #eef2ff; padding: 0.7rem 0.9rem; border-radius: 4px;
  border-left: 3px solid var(--accent); margin: 0.6rem 0;
  font-size: 0.95rem;
}
.train-meta {
  font-size: 0.85rem; color: var(--muted); margin-bottom: 0.6rem;
}
.train-items { font-size: 0.9rem; }
.train-items td, .train-items th { padding: 0.35rem 0.55rem; }

/* ─── History trainer-input badges ─── */
.trainer-input-cell { min-width: 180px; }
.badge-carrier {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px;
  font-size: 0.78rem; font-weight: 600; margin-right: 0.3rem;
}
.badge-postnl { background: #fff3ed; color: #b45309; border: 1px solid #fed7aa; }
.badge-dpd    { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.badge-bb     { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* ─── Carrier-icoontjes in train UI ─── */
.train-grid__label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.95rem;
}
.carrier-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ─── Nav-dropdown (Labelcheck menu) ─── */
.nav-dropdown { display: inline-block; position: relative; }
.nav-dropdown > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::marker { content: ''; }
.nav-tab--dropdown { padding-right: 0.4rem; }

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  background: var(--accent);
  border-radius: 4px;
  min-width: 170px;
  padding: 0.3rem;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.nav-dropdown__menu a {
  display: block;
  padding: 0.45rem 0.7rem;
  color: white;
  text-decoration: none;
  border-radius: 3px;
  font-size: 0.92rem;
  white-space: nowrap;
}
.nav-dropdown__menu a:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
.nav-dropdown__menu a.active { background: rgba(255,255,255,0.28); font-weight: 600; }

/* ─── Breadcrumb (op sub-pagina's) ─── */
.breadcrumb {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0.5rem 0 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 0.4rem; color: var(--muted); }
.breadcrumb strong { color: var(--fg); }

/* ─── History submitter-badges + method-badges ─── */
.badge-source {
  display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px;
  font-size: 0.72rem; font-weight: 600;
}
.badge-auto         { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-claude       { background: #ddd6fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.badge-method-bulk  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-method-rule  { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* ─── Train-voortgang progress bar + stats ─── */
.train-progress-bar {
  position: relative;
  height: 2.2rem;
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin: 0.5rem 0 1rem;
}
.train-progress-bar__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
  transition: width 0.3s ease;
}
.train-progress-bar__label {
  position: relative;
  text-align: center;
  line-height: 2.2rem;
  font-size: 0.95rem;
  /* Contrast-fix 2026-05-15: pure-white + tekstschaduw zorgt voor leesbaarheid
     boven groene gradient. Eerder `var(--fg)` met `mix-blend-mode: difference`
     gaf onleesbaar contrast bij hoge fill-percentages. */
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 4px rgba(0,0,0,0.25);
  letter-spacing: .02em;
}
.train-progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.train-progress-stat {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  text-align: center;
}
.train-progress-stat .num {
  font-size: 1.5rem; line-height: 1.1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.train-progress-stat .num.pos { color: var(--green); }
.train-progress-stat .num.neg { color: var(--red); }
.train-progress-stat .lbl { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }

/* /labelcheck/rules — rule-cards */
.rule-card { border-left: 4px solid var(--accent); }
.rule-header {
  display: flex; align-items: baseline; gap: 0.75rem;
  flex-wrap: wrap; margin-bottom: 0.75rem;
}
.rule-num { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.rule-outcome {
  font-size: 1.15rem; background: #fef3c7;
  padding: 0.15rem 0.45rem; border-radius: 4px;
}
.rule-stats { margin-left: auto; font-size: 0.9rem; }
.rule-coverage { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 1.2rem; }
.rule-features { font-size: 0.9rem; margin-bottom: 0.75rem; }
.rule-features th {
  text-align: left; padding: 0.2rem 0.5rem 0.2rem 0;
  font-weight: 500; color: var(--muted); width: 5rem;
}
.rule-features td { padding: 0.2rem 1rem 0.2rem 0; }
.rule-features .tag {
  background: #e0e7ff; color: #312e81;
  font-size: 0.78rem; padding: 0.1rem 0.35rem; border-radius: 3px;
  margin-right: 0.2rem;
}
.rule-actions { margin: 0; }

/* HOE-breakdown onder training-progress bar */
.method-breakdown {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0.6rem 0 0;
}
.method-pill {
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: 999px; padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  display: inline-flex; align-items: baseline; gap: 0.3rem;
}
a.method-pill--todo { text-decoration: none; color: inherit; }
a.method-pill--todo:hover { background: #eff6ff; border-color: var(--accent); }

/* /labelcheck/orderpick-controle */
.orderpick-card { border-left: 4px solid var(--red); }
.orderpick-card--too-many { border-left-color: #f59e0b; }
.orderpick-card--too-few  { border-left-color: #ef4444; }
.orderpick-header {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  align-items: flex-start; margin-bottom: 0.5rem;
}
.orderpick-meta { flex: 1; min-width: 240px; }
.orderpick-counts {
  display: flex; gap: 0.7rem; align-items: baseline;
  font-size: 0.95rem;
}
.op-count { white-space: nowrap; }
.op-count--diff { font-weight: 500; }
.orderpick-trainer { margin: 0.3rem 0 0.7rem; }
.orderpick-current-review {
  background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 4px; padding: 0.5rem 0.7rem;
  margin: 0.4rem 0 0.6rem; font-size: 0.9rem;
}
.orderpick-actions { margin: 0; }
.orderpick-buttons {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.orderpick-btn { white-space: nowrap; }
.orderpick-btn--ok { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.orderpick-btn--ok:hover { background: #a7f3d0; }
.orderpick-btn--retour { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.orderpick-btn--retour:hover { background: #fde68a; }
.orderpick-btn--nazending { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.orderpick-btn--nazending:hover { background: #bfdbfe; }
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.85rem; }
.badge-ok { background: #d1fae5; color: #065f46; }
.badge-action { background: #fef3c7; color: #92400e; }

/* Labelcheck sub-nav (vaste menubalk onder hoofdnav op alle /labelcheck/* pagina's) */
.lc-subnav {
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  background: #f8fafc;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.lc-subnav a {
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  color: var(--fg);
  border-radius: 4px 4px 0 0;
  font-size: 0.95rem;
}
.lc-subnav a:hover { background: white; }
.lc-subnav a.is-active {
  background: white;
  border: 1px solid var(--border);
  border-bottom-color: white;
  margin-bottom: -1px;
  font-weight: 600;
}

.orderpick-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 0.6rem 0;
}
@media (max-width: 720px) {
  .orderpick-compare { grid-template-columns: 1fr; }
}
.orderpick-compare__col {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
}
.orderpick-compare__col--items { border-left: 3px solid #3b82f6; }
.orderpick-compare__col--ships { border-left: 3px solid #16a34a; }
.orderpick-compare__title {
  margin: 0 0 0.4rem 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.orderpick-mini-table {
  width: 100%;
  font-size: 0.8rem;
  border-collapse: collapse;
}
.orderpick-mini-table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: 0.2rem 0.3rem;
}
.orderpick-mini-table td { padding: 0.2rem 0.3rem; vertical-align: top; }
.orderpick-mini-table tr.total-row td {
  border-top: 1px solid var(--border);
  padding-top: 0.35rem;
}

/* ═══ KS-workflow: status-pills + timeline ═══ */
.ks-block { border-left: 4px solid #d97706; }  /* oranje accent — KS-card */

.ks-block__status-row {
  display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.ks-traject-form select {
  padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 4px;
}

.ks-pill {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  border: 1px solid;
}
.ks-pill--actie_nodig   { background: #fed7aa; color: #7c2d12; border-color: #fb923c; }
.ks-pill--in_afwachting { background: #bfdbfe; color: #1e3a8a; border-color: #60a5fa; }
.ks-pill--afgerond      { background: #bbf7d0; color: #14532d; border-color: #4ade80; }
.ks-pill--idle          { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

.ks-workbench {
  display: grid;
  gap: 0.85rem;
}
.ks-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}
.ks-summary__item {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ks-summary__label {
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}
.ks-current-note {
  padding: 0.7rem 0.8rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
}
.ks-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 0.9rem;
}
.ks-control {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.ks-control h3 {
  margin-top: 0;
}
.ks-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.ks-button-row form {
  margin: 0;
}
.ks-inline-form {
  margin-top: 0.55rem;
}
.ks-open-form {
  display: grid;
  grid-template-columns: minmax(140px, 0.35fr) minmax(220px, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}
.ks-inline-form label,
.ks-open-form label {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.ks-inline-form select,
.ks-open-form select,
.ks-open-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  background: #fff;
}
.ks-flag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid;
}
.ks-flag--under { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
.ks-flag--over  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
@media (max-width: 760px) {
  .ks-control-grid,
  .ks-open-form {
    grid-template-columns: 1fr;
  }
}

.ks-block__transitions {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin: 0.5rem 0 0.7rem;
}

.ks-block__note-form {
  display: flex; gap: 0.4rem; margin: 0.6rem 0;
  padding: 0.5rem; background: #f8fafc;
  border: 1px solid var(--border); border-radius: 4px;
}
.ks-block__note-form input[type="text"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border); border-radius: 4px;
}

.ks-block__timeline-title {
  margin: 0.7rem 0 0.4rem;
  font-size: 1rem; font-weight: 600;
  border-bottom: 1px solid var(--border); padding-bottom: 0.3rem;
}

.ks-timeline { list-style: none; padding: 0; margin: 0; }
.ks-timeline__item {
  border-left: 3px solid #cbd5e1;
  padding: 0.4rem 0.7rem;
  margin-bottom: 0.4rem;
  background: #f8fafc;
  border-radius: 0 4px 4px 0;
  font-size: 0.9rem;
}
.ks-timeline__item--note               { border-left-color: #6366f1; }
.ks-timeline__item--ks_status_set      { border-left-color: #f59e0b; }
.ks-timeline__item--ks_traject_set     { border-left-color: #8b5cf6; }
.ks-timeline__item--marking_set        { border-left-color: #ef4444; }
.ks-timeline__item--marking_clear      { border-left-color: #94a3b8; }
.ks-timeline__item--orderpick_review   { border-left-color: #06b6d4; }
.ks-timeline__item--legacy_credit_followup { border-left-color: #22c55e; }
.ks-timeline__item--migration_backfill { border-left-color: #cbd5e1; opacity: 0.7; }

.ks-timeline__head {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; margin-bottom: 0.2rem;
}
.ks-timeline__when { font-weight: 500; }
.ks-timeline__icon { margin-right: 0.2rem; }
.ks-timeline__payload ul { margin: 0.3rem 0; padding-left: 1.1rem; font-size: 0.8rem; }

/* Compactere ks-pill voor in tabel-rijen */
.ks-pill--row {
  font-size: 0.72rem; padding: 0.1rem 0.4rem;
  margin-left: 0.2rem;
  vertical-align: middle;
}

/* Custom tab-styling voor KS-actie en KS-wacht tabs in orders-list */
.tier-toggle__btn.tab--ks-actie.is-active { background: #fed7aa; color: #7c2d12; }
.tier-toggle__btn.tab--ks-wacht.is-active { background: #bfdbfe; color: #1e3a8a; }

/* Voorkomt dat brede tabellen (bv. shipments in order-detail) over de
   grid-kolom heen lopen en de side-cards rechts overlappen. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.order-grid__main .main-card { min-width: 0; max-width: 100%; overflow-x: hidden; }
.order-grid__main .main-card > .table-scroll { overflow-x: auto; }

/* Traject-subrow op orders-list: kleinere pill-knoppen, onder de hoofd-tabs. */
.tier-subtoggle {
  display: flex; flex-wrap: wrap;
  gap: 0.3rem; align-items: center;
  margin: 0.3rem 0 0.7rem;
  padding: 0.3rem 0.5rem;
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: 4px;
}
.tier-subtoggle__btn {
  padding: 0.2rem 0.55rem;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--fg);
  border-radius: 3px;
  background: white;
  border: 1px solid var(--border);
}
.tier-subtoggle__btn:hover { background: #eff6ff; }
.tier-subtoggle__btn.is-active {
  background: #1e40af; color: white; border-color: #1e40af;
  font-weight: 600;
}

/* Invoice workbench — shared by /invoices and /invoices/<factuur_nr> */
.inv-meta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0.75rem 0 1.25rem;
}
.inv-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.65rem;
  margin: 1rem 0;
}
.inv-kpis > div {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.75rem;
  background: #fff;
}
.inv-kpis strong {
  display: block;
  font-size: 1.35rem;
  color: #111827;
}
.inv-kpis span {
  color: #6b7280;
  font-size: 0.82rem;
}
.saved-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0;
}
.saved-view {
  width: auto;
  padding: 0.42rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  text-decoration: none;
  color: #374151;
  background: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
}
.saved-view.is-active,
.saved-view.filter-chip--active {
  background: #1f4e79;
  color: #fff;
  border-color: #1f4e79;
}
.saved-view small {
  opacity: 0.75;
}
.saved-view.is-active small,
.saved-view.filter-chip--active small {
  color: #cbd5e1;
}
.inv-filterbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1rem 0;
  padding: 0.75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.inv-filterbar label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: #4b5563;
}
.inv-filterbar input,
.inv-filterbar select {
  min-height: 2rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.3rem 0.45rem;
}
.inv-filterbar__search input {
  min-width: 18rem;
}
.inv-panel {
  padding: 1.1rem 0;
}
.inv-panel + .inv-panel {
  border-top: 1px solid #e5e7eb;
}
.invoice-issue-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.55rem 0 0.9rem;
}
.invoice-issue-summary__item {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.invoice-issue-summary__item strong {
  display: block;
  margin: 0.15rem 0;
  font-size: 1.05rem;
}
@media (max-width: 900px) {
  .invoice-issue-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.inv-table td,
.inv-table th {
  vertical-align: top;
}
.inv-table--issues {
  display: table;
  min-width: 90rem;
  table-layout: fixed;
  white-space: normal;
  width: 100%;
}
.inv-table--issues .issue-col-main { width: 24%; }
.inv-table--issues .issue-col-ref { width: 15%; }
.inv-table--issues .issue-col-status { width: 11%; }
.inv-table--issues .issue-col-amount { width: 7%; }
.inv-table--issues .issue-col-proposal { width: 21%; }
.inv-table--issues .issue-col-actions { width: 22%; }
.inv-table--issues td,
.inv-table--issues th {
  overflow-wrap: anywhere;
}
.issue-actions-cell,
.issue-actions-head,
.issue-proposal-cell {
  min-width: 18rem;
}
.invoice-issue-pager {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin: 0.75rem 0;
}
.invoice-issue-pager__controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.invoice-issue-pager__per-page {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}
.invoice-issue-pager__per-page select {
  min-height: 2rem;
}
.inv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.issue-actions-cell .btn-small {
  min-width: 7.2rem;
}
.inv-action-group {
  margin: 0.2rem 0 0.45rem;
}
.inv-action-label {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.15rem;
  text-transform: uppercase;
}
.ks-context-hint {
  margin-top: 0.4rem;
}
.deep-proposal {
  border-left: 3px solid #94a3b8;
  padding-left: 0.75rem;
}
.deep-proposal--checkout {
  border-left-color: #f59e0b;
}
.deep-proposal--ks,
.deep-proposal--in_afwachting {
  border-left-color: #2563eb;
}
.deep-proposal--geen_actie {
  border-left-color: #16a34a;
}
.deep-proposal__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  justify-content: space-between;
}
.deep-proposal__confidence {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.deep-proposal p {
  margin: 0.25rem 0;
}
.deep-proposal__evidence {
  color: #475569;
  font-size: 0.82rem;
  margin: 0.35rem 0;
  padding-left: 1rem;
}
.deep-proposal__details {
  font-size: 0.82rem;
  margin-top: 0.35rem;
}
.deep-proposal__details summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}
.deep-proposal__details ul {
  margin: 0.25rem 0 0.45rem;
  padding-left: 1rem;
}
.deep-proposal__subhead {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 0.45rem;
  text-transform: uppercase;
}
.inv-actions form {
  display: inline;
}
.btn-disabled,
.btn-disabled:hover,
button:disabled.btn-disabled {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 1;
}
.pill-ok,
.pill-alert,
.pill-wait,
.pill-muted {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.78rem;
  border: 1px solid transparent;
}
.pill-ok { background: #dcfce7; color: #166534; border-color: #86efac; }
.pill-alert { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.pill-wait { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.pill-muted { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }
.line-audit {
  margin: 0.75rem 0 1rem;
}
.line-audit__item span,
.line-audit__item small {
  display: block;
}
.line-audit__item span {
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}
.line-audit__item strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.05rem;
}
.line-audit__item--credit {
  border-left: 3px solid #22c55e;
}
.line-audit__item--credit strong {
  color: #15803d;
}
.line-audit__item--action {
  border-left: 3px solid #ef4444;
}
.line-audit__item--action strong {
  color: #b91c1c;
}
.line-filterbar {
  align-items: center;
  margin-top: 0.75rem;
  margin-bottom: 0.55rem;
}
.line-more-filters {
  margin: 0 0 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
}
.line-more-filters summary {
  cursor: pointer;
  padding: 0.55rem 0.7rem;
  color: #374151;
  font-weight: 500;
}
.line-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0.7rem 0.7rem;
}
.toeslagen-table tr.toeslag-row:hover {
  background: #f9fafb;
}

/* Kostencheck patterns — permanente kaart (niet collapsible) */
.pattern-card-permanent { border-left: 4px solid #d97706; }
.pattern-card-header {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  align-items: baseline; margin-bottom: 0.5rem;
}
.pattern-card-header .pattern-meta { margin-left: auto; font-size: 0.95rem; }
.pattern-card-permanent .pattern-tags {
  font-size: 0.78rem; background: #e0e7ff; color: #312e81;
  padding: 0.1rem 0.4rem; border-radius: 3px;
}

/* === Shipcost-engine (le-*) — moved from labelcheck_prediction.html inline <style> 2026-06-05 === */
  .le-kpis { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
  .le-kpi { border:1px solid #d1d5db; border-radius:6px; padding:8px 14px; background:#fff; min-width:130px; }
  .le-kpi__n { font-size:1.7em; font-weight:600; font-variant-numeric:tabular-nums; }
  .le-kpi__lbl { font-size:.78em; color:#6b7280; }

  .le-filter-bar { display:flex; gap:8px; align-items:center; margin:12px 0; padding:10px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:6px; font-size:.9em; }
  .le-filter-bar label { color:#6b7280; }

  .le-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin:16px 0; }
  @media (max-width: 1100px) { .le-grid { grid-template-columns:1fr; } }
  .le-card { border:1px solid #d1d5db; border-radius:8px; padding:14px 16px; background:#fff; }
  .le-card--wide { grid-column:1 / -1; }
  .le-card h3 { margin:0 0 8px 0; font-size:1.15em; }
  .le-card h3 small { color:#6b7280; font-weight:normal; }
  .le-card h4 { margin:12px 0 6px 0; font-size:.92em; color:#374151; text-transform:uppercase; letter-spacing:.04em; }
  .le-card ul { margin:0 0 0 18px; padding:0; font-size:.92em; }
  .le-card li { margin:3px 0; }
  .le-card code { background:#f3f4f6; padding:1px 5px; border-radius:3px; font-size:.85em; }

  .le-stats { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:.92em; margin-top:8px; }
  .le-stats b { font-variant-numeric:tabular-nums; }
  .le-bar { display:inline-block; height:8px; background:#dbeafe; border-radius:4px; vertical-align:middle; }
  .le-distrib-row { display:grid; grid-template-columns:120px 90px 1fr; gap:8px; align-items:center; font-size:.9em; margin:3px 0; }
  .le-distrib-row b { font-variant-numeric:tabular-nums; }

  table.le-crosstab { width:100%; border-collapse:collapse; font-size:.92em; margin:10px 0; background:#fff; }
  table.le-crosstab th, table.le-crosstab td { border:1px solid #e5e7eb; padding:6px 8px; text-align:right; font-variant-numeric:tabular-nums; }
  table.le-crosstab th { background:#f3f4f6; }
  table.le-crosstab th:first-child, table.le-crosstab td:first-child { text-align:left; background:#fafafa; font-weight:600; }
  table.le-crosstab td.match { background:#f0fdf4; font-weight:600; }

  table.le-rates { width:100%; border-collapse:collapse; font-size:.88em; margin:6px 0 14px; }
  table.le-rates th, table.le-rates td { border-bottom:1px solid #f3f4f6; padding:4px 8px; }
  table.le-rates th { background:#f3f4f6; text-align:left; font-weight:600; }
  table.le-rates td.num { text-align:right; font-variant-numeric:tabular-nums; }

  .le-edit-todo { background:#fef3c7; border:1px solid #fde68a; border-radius:6px; padding:10px 14px; font-size:.92em; color:#92400e; margin:10px 0; }

  .le-invalid-reasons { font-size:.85em; color:#6b7280; }
  .le-invalid-reasons li { margin:1px 0; }

  .carrier-source-tabs {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    margin:12px 0;
  }
  .carrier-source-tab {
    display:grid;
    gap:3px;
    min-height:58px;
    align-content:center;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-bottom-width:3px;
    background:#fff;
    color:#374151;
    text-decoration:none;
  }
  .carrier-source-tab:hover {
    border-color:#93c5fd;
    background:#f8fafc;
    color:#111827;
    text-decoration:none;
  }
  .carrier-source-tab.is-active {
    border-color:#2563eb;
    border-bottom-color:#1d4ed8;
    background:#eff6ff;
    color:#1e3a8a;
  }
  .carrier-source-tab b {
    display:block;
    font-size:.95em;
    line-height:1.2;
  }
  .carrier-source-tab span {
    display:block;
    color:#6b7280;
    font-size:.82em;
    line-height:1.25;
  }
  .carrier-source-tab.is-active span {
    color:#1d4ed8;
  }
  .carrier-source-intro {
    display:flex;
    gap:10px;
    align-items:baseline;
    flex-wrap:wrap;
    margin:8px 0 14px;
    padding:9px 12px;
    border:1px solid #d1d5db;
    border-left:4px solid #2563eb;
    background:#f9fafb;
    font-size:.9em;
  }
  .carrier-source-intro b {
    color:#111827;
  }
  .carrier-source-intro span {
    color:#4b5563;
  }
  .carrier-source-intro--postnl { border-left-color:#2563eb; }
  .carrier-source-intro--sendy { border-left-color:#f97316; }
  .carrier-source-intro--bb { border-left-color:#92400e; }
  .carrier-source-tab.is-active[href*="carrier_group=sendy"] {
    border-color:#ea580c;
    border-bottom-color:#c2410c;
    background:#fff7ed;
    color:#7c2d12;
  }
  .carrier-source-tab.is-active[href*="carrier_group=sendy"] span {
    color:#9a3412;
  }

  .sendy-simple-card h3 {
    margin-bottom:10px;
  }
  .sendy-simple-card {
    border-color:#94a3b8;
    background:#ffffff;
  }
  .sendy-tree {
    display:grid;
    gap:16px;
    margin:6px 0 12px;
  }
  .sendy-tree__root {
    justify-self:center;
    max-width:min(720px, 100%);
    min-width:min(560px, 100%);
    text-align:center;
    display:grid;
    gap:5px;
    border:1px solid #64748b;
    border-left:5px solid #111827;
    background:#e5e7eb;
    padding:10px 12px;
  }
  .sendy-route-chips {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    margin-top:4px;
  }
  .sendy-route-chips span,
  .sendy-route-chips a {
    display:inline-flex;
    align-items:center;
    min-height:22px;
    color:#111827;
    background:#ffffff;
    border:1px solid #94a3b8;
    border-radius:999px;
    padding:2px 8px;
    font-size:.76em;
    font-weight:700;
    line-height:1.25;
    text-decoration:none;
  }
  .sendy-route-chips a:hover,
  .sendy-route-chips a:focus-visible {
    border-color:#2563eb;
    background:#dbeafe;
    color:#1e3a8a;
    outline:none;
  }
  .sendy-route-chips a.is-active {
    border-color:#111827;
    background:#111827;
    color:#ffffff;
  }
  .sendy-route-chips--branch {
    margin-top:7px;
    max-width:340px;
  }
  .sendy-route-chips--branch a,
  .sendy-route-chips--country a {
    font-size:.72em;
    min-height:21px;
    min-width:34px;
    justify-content:center;
    padding:2px 7px;
  }
  .sendy-tree__root b,
  .sendy-tree__branch-title b,
  .sendy-tree__node header b {
    color:#111827;
    font-size:.9em;
  }
  .sendy-tree__root span,
  .sendy-tree__branch-title span {
    color:#374151;
    font-size:.86em;
    line-height:1.35;
  }
  .sendy-tree__root small,
  .sendy-tree__branch-title small {
    color:#4b5563;
    font-size:.72em;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
  }
  .sendy-route-chips--country {
    margin-top:2px;
  }
  .sendy-route-chips--country a {
    font-size:.82em;
    min-height:26px;
    min-width:40px;
  }
  .sendy-tree__branches {
    position:relative;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
    padding-top:18px;
  }
  .sendy-tree__branches::before {
    content:"";
    position:absolute;
    top:0;
    left:25%;
    right:25%;
    border-top:3px solid #94a3b8;
  }
  .sendy-tree__branch {
    position:relative;
    display:grid;
    align-content:start;
    gap:14px;
    transition:opacity .16s ease, filter .16s ease, transform .16s ease;
  }
  @media (hover:hover) {
    .sendy-tree__branches:has(.sendy-tree__branch:hover) .sendy-tree__branch:not(:hover) {
      opacity:.48;
      filter:grayscale(.65) saturate(.55);
      transform:scale(.99);
    }
    .sendy-tree__branch:hover {
      z-index:2;
      filter:none;
      transform:translateY(-2px);
    }
    .sendy-tree__branch:hover .sendy-tree__branch-title,
    .sendy-tree__branch:hover .sendy-tree__node {
      box-shadow:0 8px 20px rgba(15,23,42,.10);
    }
  }
  @media (prefers-reduced-motion:reduce) {
    .sendy-tree__branch {
      transition:none;
    }
  }
  .sendy-tree__branch::before {
    content:"";
    position:absolute;
    top:-18px;
    left:50%;
    height:18px;
    border-left:3px solid #94a3b8;
  }
  .sendy-tree__branch-title {
    justify-self:center;
    align-self:start;
    align-content:center;
    min-width:min(340px, 100%);
    min-height:62px;
    text-align:center;
    display:grid;
    gap:4px;
    border:1px solid #1d4ed8;
    border-left:5px solid #1d4ed8;
    background:#dbeafe;
    padding:10px 12px;
  }
  .sendy-tree__branch--return .sendy-tree__branch-title {
    border-color:#be123c;
    border-left-color:#be123c;
    background:#ffe4e6;
  }
  .sendy-tree__nodes {
    position:relative;
    display:grid;
    gap:12px;
    padding-left:20px;
  }
  .sendy-tree__nodes::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:8px;
    border-left:3px solid #94a3b8;
  }
  .sendy-tree__branch--outbound .sendy-tree__nodes::before {
    border-left-color:#60a5fa;
  }
  .sendy-tree__branch--return .sendy-tree__nodes::before {
    border-left-color:#fb7185;
  }
  .sendy-tree__node {
    position:relative;
    display:grid;
    gap:7px;
    min-width:0;
    border:1px solid #94a3b8;
    border-left:5px solid #2563eb;
    background:#fff;
    padding:10px 12px;
    box-shadow:0 1px 2px rgba(15,23,42,.06);
  }
  .sendy-tree__node::before {
    content:"";
    position:absolute;
    top:20px;
    left:-16px;
    width:16px;
    border-top:3px solid #94a3b8;
  }
  .sendy-tree__node--outbound {
    border-left-color:#2563eb;
    background:#ffffff;
  }
  .sendy-tree__node--outbound::before {
    border-top-color:#60a5fa;
  }
  .sendy-tree__node--return {
    border-left-color:#be123c;
    background:#ffffff;
  }
  .sendy-tree__node--return::before {
    border-top-color:#fb7185;
  }
  .sendy-tree__node--dpd {
    border-left-color:#dc0032;
  }
  .sendy-tree__node--dpd::before {
    border-top-color:#dc0032;
  }
  .sendy-tree__node--postnl {
    border-left-color:#fb6200;
  }
  .sendy-tree__node--postnl::before {
    border-top-color:#fb6200;
  }
  .sendy-tree__node--muted {
    border-color:#9ca3af;
    border-left-color:#4b5563;
    background:#f3f4f6;
  }
  .sendy-tree__node--muted.sendy-tree__node--postnl {
    border-color:#fdba74;
    border-left-color:#fb6200;
    background:#fff7ed;
  }
  .sendy-tree__node--muted.sendy-tree__node--postnl::before {
    border-top-color:#fb6200;
  }
  .sendy-tree__node--muted::before {
    border-top-color:#9ca3af;
  }
  .sendy-tree__node header {
    display:flex;
    gap:8px;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    background:transparent;
    color:#111827;
    padding:0 0 5px;
    border-bottom:1px solid #cbd5e1;
  }
  .sendy-tree__node header strong {
    display:inline-flex;
    align-items:center;
    min-height:20px;
    color:#1e40af;
    background:#dbeafe;
    border:1px solid #93c5fd;
    border-radius:999px;
    padding:1px 8px;
    font-size:.82em;
    line-height:1.25;
  }
  .sendy-tree__node--return header strong {
    color:#881337;
    background:#ffe4e6;
    border-color:#fda4af;
  }
  .carrier-logo-pill {
    gap:7px;
    padding:3px 8px;
    min-height:25px;
  }
  .carrier-logo-pill img {
    display:block;
    height:16px;
    width:auto;
    max-width:54px;
    object-fit:contain;
  }
  .carrier-logo-pill span {
    white-space:nowrap;
  }
  .carrier-logo-pill--dpd {
    color:#ffffff !important;
    background:#dc0032 !important;
    border-color:#bb0033 !important;
  }
  .carrier-logo-pill--dpd img {
    background:#ffffff;
    border-radius:2px;
    padding:1px 3px;
  }
  .carrier-logo-pill--postnl {
    color:#111827 !important;
    background:#ffedd5 !important;
    border-color:#fb6200 !important;
  }
  .carrier-logo-pill--postnl img {
    height:18px;
    max-width:24px;
  }
  .sendy-tree__node p {
    margin:0;
    color:#1f2937;
    font-size:.84em;
    line-height:1.35;
  }
  .sendy-tree__node p b {
    color:#111827;
    margin-right:3px;
  }
  .sendy-rate-stack {
    display:grid;
    gap:6px;
  }
  .sendy-rate {
    display:grid;
    grid-template-columns:minmax(116px, .8fr) minmax(0, 1.6fr) auto;
    gap:8px;
    align-items:center;
    border:1px solid #94a3b8;
    border-left:5px solid #334155;
    background:#f8fafc;
    padding:7px 8px;
  }
  .sendy-rate b {
    color:#111827;
    font-size:.78em;
    text-transform:uppercase;
    line-height:1.2;
  }
  .sendy-rate span {
    color:#1f2937;
    font-size:.82em;
    line-height:1.3;
  }
  .sendy-rate code {
    justify-self:end;
    color:#111827;
    background:#ffffff;
    border:1px solid #64748b;
    font-weight:700;
  }
  .sendy-rate--base {
    border-left-color:#2563eb;
    background:#eff6ff;
  }
  .sendy-rate--base code {
    border-color:#2563eb;
    background:#dbeafe;
    color:#1e3a8a;
  }
  .sendy-rate--possible {
    border-color:#d97706;
    border-left-color:#b45309;
    background:#fffbeb;
  }
  .sendy-rate--possible b,
  .sendy-rate--possible code {
    color:#78350f;
  }
  .sendy-rate--possible code {
    border-color:#d97706;
    background:#fef3c7;
  }
  .sendy-rate--forbidden {
    border-color:#dc2626;
    border-left-color:#991b1b;
    background:#fef2f2;
  }
  .sendy-rate--forbidden b,
  .sendy-rate--forbidden code {
    color:#7f1d1d;
  }
  .sendy-rate--forbidden code {
    border-color:#dc2626;
    background:#fee2e2;
  }
  .sendy-tree__node code {
    white-space:nowrap;
    color:#111827;
    background:#fef3c7;
    border:1px solid #f59e0b;
  }
  .sendy-tree__node .sendy-rate code {
    justify-self:end;
    color:#111827;
    background:#ffffff;
    border:1px solid #64748b;
    font-weight:700;
  }
  .sendy-tree__node .sendy-rate--base code {
    border-color:#2563eb;
    background:#dbeafe;
    color:#1e3a8a;
  }
  .sendy-tree__node .sendy-rate--possible code {
    border-color:#d97706;
    background:#fef3c7;
    color:#78350f;
  }
  .sendy-tree__node .sendy-rate--forbidden code {
    border-color:#dc2626;
    background:#fee2e2;
    color:#7f1d1d;
  }
  .sendy-tree__node--muted header strong {
    color:#374151;
    background:#e5e7eb;
    border-color:#9ca3af;
  }
  .sendy-engine-strip {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:8px 0 0;
  }
  .sendy-engine-strip span {
    flex:1 1 190px;
    background:#f8fafc;
    border:1px solid #94a3b8;
    border-top:3px solid #475569;
    padding:8px 10px;
    color:#1f2937;
    font-size:.84em;
    line-height:1.35;
  }
  .sendy-engine-strip b {
    color:#111827;
    margin-right:4px;
  }
  @media (max-width:700px) {
    .carrier-source-tabs { grid-template-columns:1fr; }
    .carrier-source-tab { min-height:0; }
    .sendy-tree__root,
    .sendy-tree__branch-title { justify-self:stretch; min-width:0; text-align:left; }
    .sendy-tree__branches { grid-template-columns:1fr; padding-top:0; }
    .sendy-tree__branches::before,
    .sendy-tree__branch::before { display:none; }
    .sendy-rate { grid-template-columns:1fr; }
    .sendy-tree__node .sendy-rate code { justify-self:start; }
    .sendy-engine-strip span { flex-basis:100%; }
  }

/* === Shipcost-engine in-page filter bar (.se-filterbar) — distinct from the .lc-subnav family bar === */
.se-filterbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; padding:8px 12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:6px; font-size:.9em; }
.se-filterbar a { color:#374151; text-decoration:none; padding:2px 8px; border-radius:4px; }
.se-filterbar a:hover { background:#eef2ff; }
.se-filterbar a.is-active { font-weight:600; background:#e0e7ff; color:#1e3a8a; }
.se-filterbar .se-filterbar__label { color:#6b7280; font-weight:600; margin-right:2px; }

/* === Shipcost-engine simulator + shared bits (review wfpi2pxl2 consistency fixes) === */
.sim-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; }
.sim-del { cursor:pointer; border:1px solid #d1d5db; background:#fff; border-radius:4px; padding:2px 9px; color:#b91c1c; line-height:1.4; }
.sim-del:hover { background:#fef2f2; border-color:#fca5a5; }
.table-wrap { overflow-x:auto; margin:6px 0 14px; }
.cost-foot { color:#6b7280; font-size:.82em; margin-top:12px; }

/* Shipcost-engine subnav group separator (thin vertical divider between tab-groups) */
.lc-subnav__sep { display:inline-block; width:1px; height:1.1em; background:#d1d5db; margin:0 10px; vertical-align:middle; }

/* === IT-modus (runtime-overzicht, /it) === */
.it-shell__title { font-weight:600; padding:10px 0; display:inline-block; }
/* Auto-emails overzicht (/it/auto-emails) */
.ae-service { margin:0 0 26px; }
.ae-service__head h2 { margin:18px 0 4px; font-size:1.15rem; }
.ae-service__blurb { color:#4b5563; font-size:.9em; margin:2px 0 2px; max-width:78ch; }
.ae-service__src { color:#6b7280; font-size:.82em; margin:0 0 10px; }
.ae-mail { border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; margin:0 0 10px; background:#fff; }
.ae-mail__top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ae-mail__name { font-weight:600; }
.ae-mail__trigger { color:#4b5563; font-size:.88em; margin:6px 0 8px; max-width:82ch; }
.ae-recipients { display:flex; flex-direction:column; gap:3px; margin:6px 0 4px; }
.ae-recip { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ae-recip__label { display:inline-block; min-width:34px; color:#6b7280; font-size:.82em; font-weight:600; }
.ae-addr { font-weight:500; }
.ae-preview { margin-top:8px; }
.ae-preview summary { cursor:pointer; color:#1e3a8a; font-size:.88em; }
.ae-preview__box { border:1px solid #e5e7eb; border-radius:8px; margin-top:8px; overflow:hidden; }
.ae-preview__hdr { padding:6px 10px; border-bottom:1px solid #f3f4f6; font-size:.86em; }
.ae-preview__hdr span { color:#6b7280; font-weight:600; margin-right:6px; }
.ae-preview__body { margin:0; padding:12px; background:#f9fafb; font-size:.82em; line-height:1.45;
  white-space:pre-wrap; word-break:break-word; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.it-page { max-width:1150px; }
.it-page__meta { color:#6b7280; font-size:.9em; margin:2px 0 14px; }
.it-alert { background:#fef3c7; border:1px solid #f59e0b; color:#92400e; padding:8px 12px; border-radius:6px; margin:8px 0 14px; }
.it-group__title { margin:22px 0 6px; font-size:1.05em; }
.it-group__count { color:#9ca3af; font-weight:normal; font-size:.85em; }
.it-table { width:100%; border-collapse:collapse; font-size:.9em; }
.it-table th { text-align:left; color:#6b7280; font-weight:600; padding:6px 10px 6px 0; border-bottom:1px solid #e5e7eb; }
.it-table td { padding:5px 10px 5px 0; border-bottom:1px solid #f3f4f6; vertical-align:top; }
.it-name { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; white-space:nowrap; }
.it-sched { white-space:nowrap; }
.it-note { color:#b45309; font-size:.85em; white-space:normal; }
.it-runtime-details { margin:5px 0 0 0; max-width:38rem; font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.it-runtime-details summary {
  display:inline-flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  color:#1d4ed8;
  font-size:.86em;
  font-weight:600;
  white-space:normal;
}
.it-runtime-details summary::-webkit-details-marker { display:none; }
.it-runtime-details summary::before {
  content:"▸";
  color:#64748b;
  font-size:.82em;
}
.it-runtime-details[open] summary::before { content:"▾"; }
.it-runtime-details ul { margin:6px 0 0 0; padding:0; list-style:none; }
.it-runtime-details li {
  color:#374151;
  background:#f8fafc;
  border-left:3px solid #f59e0b;
  border-radius:4px;
  margin:4px 0;
  padding:5px 8px;
  white-space:normal;
  font-size:.9em;
  line-height:1.35;
}
.it-detail { color:#9ca3af; font-size:.85em; margin-left:6px; }
.it-badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:.82em; font-weight:600; }
.it-badge--ok { background:#dcfce7; color:#166534; }
.it-badge--warn { background:#fef3c7; color:#92400e; }
.it-badge--err { background:#fee2e2; color:#991b1b; }
.it-badge--muted { background:#f3f4f6; color:#6b7280; }
.it-vis { font-size:.8em; padding:1px 7px; border-radius:9px; }
.it-vis--open { background:#e0f2fe; color:#075985; }
.it-vis--admin { background:#ede9fe; color:#5b21b6; }
.it-tabs { margin:4px 0 14px; }
.it-tabs .it-group__count { font-size:.8em; }
/* Twee-niveau tabs: host-groep (top) > type-sub-tabs. De host-groepen staan naast
   elkaar; binnen elke groep een label boven z'n rij sub-tabs. align-items:flex-end
   houdt alle sub-tab-rijen op dezelfde onderlijn zodat de actieve-tab-rand (de
   -1px-truc van .lc-subnav) netjes op de border-bottom van de balk valt. */
.it-tabs--grouped { gap:22px; align-items:flex-end; padding:.4rem .8rem 0; }
.it-tabgroup { display:flex; flex-direction:column; gap:5px; }
.it-tabgroup__label {
  font-size:.68em; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#64748b; padding-left:4px; align-self:flex-start;
}
.it-tabgroup__tabs { display:flex; gap:.2rem; flex-wrap:wrap; }
/* Subtiele scheiding tussen de host-groepen (behalve vóór de eerste). */
.it-tabgroup + .it-tabgroup { border-left:1px solid var(--border); padding-left:22px; margin-left:0; }
.it-name a { color:#1d4ed8; text-decoration:none; border-bottom:1px solid #bfdbfe; }
.it-name a:hover { color:#1e40af; border-bottom-color:#1e40af; }
.it-owner { display:inline-block; padding:1px 8px; border-radius:10px; font-size:.82em; white-space:nowrap; }
.it-owner--dylan { background:#ffedd5; color:#9a3412; }
.it-owner--tjalling { background:#dbeafe; color:#1e40af; }
.it-kind { display:inline-block; background:#f3f4f6; color:#374151; border-radius:6px; padding:0 6px; font-size:.75em; text-transform:uppercase; letter-spacing:.03em; }
/* CSS-only uitleg-tooltip: hover of toetsenbord-focus op .it-tip toont data-tip. */
.it-tip { position:relative; cursor:help; border-bottom:1px dotted #9ca3af; }
.it-tip--tab { cursor:pointer; border-bottom:none; }
.it-tip--tab:hover::after, .it-tip--tab:focus::after { width:340px; }
.it-tip:hover::after, .it-tip:focus::after {
  content:attr(data-tip); position:absolute; left:0; top:130%; z-index:40;
  background:#111827; color:#f9fafb; padding:7px 10px; border-radius:6px;
  font-size:.78rem; font-weight:400; line-height:1.4; width:280px; white-space:normal;
  text-transform:none; letter-spacing:normal; box-shadow:0 3px 10px rgba(0,0,0,.3);
  pointer-events:none;
}