/* recipe2colruyt — Xtra-designsysteem, afgeleid van de échte mijnxtra.be tokens
   (clientlib-site.css): teal primair (--primary-500 #00ab9e), koele blauwgrijze
   neutrals, pills op 50px, cards op 18px. Xtra's eigen "Xtra"-fonts zijn
   proprietary → system-sans fallback, net als hun eigen --bs-font-sans-serif. */
:root {
  --xtra-primary: #00ab9e;        /* Xtra --primary-500 */
  --xtra-primary-dark: #008077;   /* --primary-700, hover */
  --xtra-primary-600: #009a8e;
  --xtra-primary-50: #eff9f9;     /* --primary-50 tint */
  --xtra-primary-100: #e5f7f5;    /* --primary-100 */
  --xtra-accent: #19b3a8;         /* --primary-400 */
  --bg: #f3f4fa;                  /* --neutral-100 */
  --surface: #ffffff;             /* --neutral-000 */
  --text: #1b1f27;                /* --neutral-900 */
  --text-soft: #2e3b56;           /* --neutral-800 */
  --muted: #63708a;               /* --neutral-600 */
  --border: #ebedf5;              /* --neutral-200 */
  --border-strong: #bbc1d3;       /* --neutral-300 */
  --success: #4ea968;             /* Xtra --success */
  --success-bg: #e8f5ec;
  --warn: #9a6700;
  --warn-bg: #fdf3d7;
  --danger: #ff5c5c;              /* Xtra --error */
  --danger-bg: #ffe9e9;
  --radius: 18px;
  --radius-sm: 10px;
  --pill: 50px;
  --shadow: 0 1px 3px rgba(27, 31, 39, 0.07), 0 1px 2px rgba(27, 31, 39, 0.04);
  --shadow-md: 0 6px 20px rgba(27, 31, 39, 0.10);
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  margin: 0;
  line-height: 1.5;
}

/* Sticky app bar */
.appbar {
  background: var(--xtra-primary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow);
}
.appbar-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}
.brand-mark {
  background: #fff;
  color: var(--xtra-primary);
  font-weight: 800;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 0.95rem;
}
.appbar nav { margin-left: auto; display: flex; gap: 0.4rem; }
.appbar nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--pill);
  opacity: 0.85;
}
.appbar nav a:hover, .appbar nav a.active { background: rgba(255, 255, 255, 0.16); opacity: 1; }

.container { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

h1 { font-size: 1.35rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.subtitle { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.25rem; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  margin-bottom: 0.85rem;
}
.card.clickable { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.card.clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.row { display: flex; align-items: center; gap: 0.75rem; }
.row .grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: 0.85rem; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong { font-weight: 600; }

/* Buttons (pill) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--pill);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  background: var(--xtra-primary);
  color: #fff;
  transition: background 0.15s;
}
.btn:hover { background: var(--xtra-primary-dark); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary { background: #fff; color: var(--xtra-primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--xtra-primary-50); }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.85rem; }

/* Inputs */
input[type="text"], input[type="search"] {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}
input:focus { outline: 2px solid var(--xtra-primary-50); border-color: var(--xtra-primary); }
label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.25rem; }
.field { margin-bottom: 0.85rem; }

/* Badges */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--pill);
  text-transform: capitalize;
}
.badge.matched, .badge.ok { background: var(--success-bg); color: var(--success); }
.badge.pending { background: var(--warn-bg); color: var(--warn); }
.badge.failed, .badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.neutral { background: var(--xtra-primary-50); color: var(--xtra-primary); }

/* Product line item (ingredient → product) */
.line { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.line:last-child { border-bottom: 0; }
.line .ingredient { width: 38%; font-weight: 600; }
.line .product { flex: 1; min-width: 0; }
.line.unmatched .product { color: var(--danger); }

.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.toolbar .grow { flex: 1; }

/* candidate picker (review queue) */
.candidates { margin-top: 0.4rem; max-height: 190px; overflow-y: auto; border-radius: var(--radius-sm); }
.candidate { padding: 0.45rem 0.6rem; cursor: pointer; border-radius: 8px; font-size: 0.9rem; }
.candidate:hover { background: var(--xtra-primary-50); }