:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel2: #f6f6f8;
  --line: #e7e7ec;
  --text: #161219;
  --muted: #7a7682;
  --pink: #e5007d;        /* Bax magenta */
  --pink-dark: #c0006a;
  --pink-tint: #fde6f2;
  --accent: #e5007d;      /* primaire actiekleur */
  --accent2: #e5007d;
  --ok: #1faa59;
  --warn: #e08600;
  --danger: #e0245e;
  --wa: #25d366;          /* WhatsApp-groen (alleen voor berichtballon) */
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Header met Bax-logo ---- */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 28px; background: #fff; border-bottom: 3px solid var(--pink);
}
.brand { display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; line-height: 1; }
.logo .bax {
  background: var(--pink); color: #fff; font-weight: 800; font-style: italic;
  font-size: 26px; letter-spacing: -.02em; padding: 3px 10px 4px; border-radius: 6px;
}
.logo .music {
  color: var(--text); font-weight: 800; font-style: italic; font-size: 26px;
  letter-spacing: -.02em; margin-left: 7px;
}
.brandtext { border-left: 1px solid var(--line); padding-left: 16px; }
.brandtext h1 {
  margin: 0; font-size: 17px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--text);
}
.brandtext .tagline {
  color: var(--pink); font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
}
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.badge.mock { color: var(--warn); border-color: var(--warn); background: #fff7ec; }
.badge.live { color: var(--pink); border-color: var(--pink); background: var(--pink-tint); }
.badge.off { color: var(--muted); }

/* ---- Statistiek ---- */
.stats { display: flex; gap: 14px; padding: 22px 28px 0; flex-wrap: wrap; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 20px; min-width: 120px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.stat .n { font-size: 26px; font-weight: 800; font-style: italic; }
.stat .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.stat.attention .n { color: var(--warn); }
.stat.excluded .n { color: var(--danger); }

/* ---- Tijdlijn ---- */
.timeline-card {
  margin: 22px 28px 0; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.tl-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.tl-head h2 {
  margin: 0; font-size: 14px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em;
}
.tl-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.tl-legend span { display: flex; align-items: center; gap: 6px; }
.tl-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dot.sent, .tl-bar.sent { background: var(--pink); }
.dot.failed, .tl-bar.failed { background: var(--warn); }
.dot.reply, .tl-bar.reply { background: #2563eb; }
.tl-chart { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.tl-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 34px; flex: 1; }
.tl-stack { display: flex; align-items: flex-end; gap: 3px; }
.tl-bar { width: 8px; border-radius: 3px 3px 0 0; transition: height .2s; }
.tl-lbl { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tl-lbl.empty { opacity: .4; }

/* ---- Toolbar ---- */
.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 28px 8px; flex-wrap: wrap; gap: 12px;
}
.filters { display: flex; gap: 6px; }
.filter {
  background: #fff; color: var(--muted); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.filter.active { color: #fff; border-color: var(--pink); background: var(--pink); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  background: var(--pink); color: #fff; border: none; padding: 9px 16px;
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700;
}
.btn.ghost { background: #fff; color: var(--text); border: 1px solid var(--line); }
.btn:hover { filter: brightness(1.05); }
.btn.danger { background: var(--danger); }
.btn.ok { background: var(--ok); }

/* ---- Tabel ---- */
table { width: calc(100% - 56px); margin: 8px 28px 40px; border-collapse: collapse; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
tbody tr:hover { background: #fdf3f8; }
td .ref { font-family: ui-monospace, monospace; font-size: 13px; }
.pill {
  font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 700;
  white-space: nowrap; display: inline-block; text-transform: uppercase; letter-spacing: .03em;
}
.pill.bezorging { background: var(--pink-tint); color: var(--pink-dark); }
.pill.afhaling { background: #ecebf1; color: #4a4458; }
.st-sent { color: #2563eb; }
.st-reply_received, .st-no_phone, .st-send_failed { color: var(--warn); font-weight: 700; }
.st-reschedule { color: var(--danger); }
.st-confirmed, .st-done { color: var(--muted); }
.linkbtn { background: none; border: none; color: var(--pink); cursor: pointer; font-size: 13px; font-weight: 600; }

/* ---- Detailpaneel ---- */
.overlay { position: fixed; inset: 0; background: rgba(20,18,25,.45); display: flex; justify-content: flex-end; }
.overlay.hidden { display: none; }
.panel {
  width: 460px; max-width: 100%; height: 100%; background: #fff;
  border-left: 4px solid var(--pink); padding: 24px; overflow-y: auto; position: relative;
}
.close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--muted); font-size: 26px; cursor: pointer; }
.panel h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; font-style: italic; }
.kv { display: flex; gap: 8px; margin: 4px 0; font-size: 13px; }
.kv .k { color: var(--muted); min-width: 110px; }
.msgbox {
  background: #eafbf0; border: 1px solid #bfead0; border-left: 3px solid var(--wa);
  border-radius: 10px; padding: 12px; margin: 8px 0; white-space: pre-wrap; font-size: 13px;
}
.reply { background: var(--pink-tint); border-color: #f4b6d8; border-left-color: var(--pink); }
.section-title { color: var(--pink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 6px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
textarea, input[type=text] {
  width: 100%; background: #fff; border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; padding: 9px; font: inherit; margin: 6px 0;
}
.event { font-size: 12px; color: var(--muted); padding: 5px 0; border-bottom: 1px solid var(--line); }
.event b { color: var(--text); }