:root {
  --bg:#f5f4f0; --card:#ffffff; --text:#1f1f1c; --muted:#6b6a64; --line:#e4e1d9; --soft:#f0eee8;
  --accent:#b4471b; --accent-dark:#923712; --ok:#2e7d32; --warn:#c62828;
  --hoog:#c62828; --normaal:#b26a00; --laag:#2e7d32;
  --radius:10px; --shadow:0 1px 2px rgba(0,0,0,.04);
}
* { box-sizing:border-box; }
body { margin:0; font:14.5px/1.5 system-ui, "Segoe UI", -apple-system, sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); }
h1 { font-size:21px; margin:4px 0 6px; line-height:1.3; } h2 { font-size:16px; margin:0 0 10px; } h3 { font-size:14px; margin:14px 0 6px; }
.muted { color:var(--muted); } .small { font-size:12.5px; } .nowrap { white-space:nowrap; }
.ok { color:var(--ok); font-weight:600; } .warn { color:var(--warn); }
code { background:var(--soft); padding:1px 5px; border-radius:4px; }

/* bovenbalk */
.topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px; padding:8px 18px; background:#1f1f1c; color:#fff; flex-wrap:wrap; }
.brand { color:#fff; font-weight:700; text-decoration:none; white-space:nowrap; } .brand span { font-weight:400; color:#cfcabd; }
.topbar nav { display:flex; gap:2px; }
.topbar nav a { color:#d9d5ca; text-decoration:none; padding:6px 10px; border-radius:6px; }
.topbar nav a:hover, .topbar nav a.on { background:#34332e; color:#fff; }
.search { flex:1; min-width:200px; }
.search input { width:100%; max-width:440px; font:inherit; padding:6px 10px; border-radius:6px; border:1px solid #444; background:#2b2a26; color:#fff; }
.me { color:#cfcabd; font-size:13px; }
.me input { font:inherit; padding:4px 7px; border-radius:6px; border:1px solid #444; background:#2b2a26; color:#fff; }
.me input.need { border-color:#ff8a65; box-shadow:0 0 0 2px #ff8a65; }
.mode { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:20px; }
.mode-test { background:#fff3cd; color:#7a5a00; } .mode-live { background:#c62828; color:#fff; } .mode-uit { background:#ddd; color:#555; }
.bell { position:relative; background:transparent; border:0; font-size:17px; padding:2px 6px; cursor:pointer; }
.bell:hover { background:#34332e; }
.bell span { position:absolute; top:-4px; right:-6px; background:var(--warn); color:#fff; font-size:11px; border-radius:10px; padding:0 5px; }
.spoed { background:#fdecea; border-bottom:1px solid #f5c2c0; padding:8px 18px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.spoed a { color:#8e1b1b; } .spoed button { margin-left:auto; }

main { max-width:1380px; margin:0 auto; padding:18px 16px 60px; }
.head { margin-bottom:10px; } .head .meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); }
.back { display:inline-block; margin-bottom:6px; text-decoration:none; }

/* knoppen */
button, a.btn { display:inline-block; background:var(--accent); color:#fff; border:0; padding:7px 13px; border-radius:7px; font:inherit; cursor:pointer; text-decoration:none; line-height:1.3; }
button:hover, a.btn:hover { background:var(--accent-dark); }
button.secondary, a.btn.secondary { background:var(--soft); color:var(--text); border:1px solid var(--line); }
button.secondary:hover, a.btn.secondary:hover { background:#e7e4dc; }
button.primary { background:var(--ok); font-weight:600; padding:8px 16px; } button.primary:hover { background:#25692a; }
button.mini { padding:2px 9px; background:var(--soft); color:var(--text); border:1px solid var(--line); font-size:12.5px; }
button.mini:hover { background:#dcedc8; }
button:disabled { opacity:.45; cursor:not-allowed; }
form.inline { display:inline-flex; gap:6px; align-items:center; margin:0; }
input, select, textarea { font:inherit; }
select, .actionbar input, .toolbar input { padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:#fff; }
textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; line-height:1.5; }
textarea:focus, select:focus, input:focus { outline:2px solid #f1c4b0; outline-offset:0; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; }

/* meldingen */
.alert { background:#fff3e0; border:1px solid #ffcc80; padding:9px 13px; border-radius:8px; }
.okbox { background:#e8f5e9; border:1px solid #a5d6a7; padding:9px 13px; border-radius:8px; color:#1b5e20; }
.note { background:#fffbea; border:1px solid #f0e08a; padding:9px 13px; border-radius:8px; margin:8px 0; white-space:pre-wrap; }

/* kaarten per kanaal */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:14px; }
.cards-3 { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.card-ch { display:flex; flex-direction:column; gap:3px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; text-decoration:none; color:var(--text); box-shadow:var(--shadow); }
a.card-ch:hover { border-color:#d7c9bd; } .card-ch.active { border-color:var(--accent); box-shadow:0 0 0 2px #f6d9cc; }
.card-ch .ch { align-self:flex-start; }
.card-ch .big { font-size:26px; font-weight:700; line-height:1.1; }
.card-ch .sub { font-size:12.5px; color:var(--muted); } .dot-nieuw { color:#0d47a1; }

/* lijst */
.listbar { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.listbar .right { margin-left:auto; }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.tabs { display:flex; gap:4px; }
.tabs a { padding:7px 14px; border-radius:8px; border:1px solid var(--line); background:var(--soft); color:var(--text); text-decoration:none; }
.tabs a.active { background:var(--card); font-weight:600; border-color:#d9cfc4; }
.tabs .count { background:#e2ded5; border-radius:10px; padding:0 7px; font-size:12px; font-weight:400; }
.searchinfo { padding:6px 0; }
table.list { width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table.list th, table.list td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.list th { background:#f3f1ec; font-size:12.5px; color:var(--muted); font-weight:600; }
table.list th a { color:inherit; text-decoration:none; }
table.list tbody tr { cursor:pointer; } table.list tbody tr:hover { background:#fbfaf7; }
table.list tbody tr:last-child td { border-bottom:0; }
tr.row-afgehandeld { color:#7d7b74; } tr.row-afgehandeld td.onderwerp a { color:#7d7b74; }
tr.row-hoog td:first-child { box-shadow:inset 3px 0 0 var(--hoog); }
td.w-status { width:92px; } td.w-status .badge { margin-top:3px; }
td.onderwerp a { font-weight:600; text-decoration:none; color:var(--text); } td.onderwerp a:hover { color:var(--accent); }
td.klant { max-width:220px; overflow-wrap:anywhere; }
.meta-line { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:3px; }
.empty { text-align:center; color:var(--muted); padding:30px; }
.footer-info { margin-top:10px; }

/* labels */
.badge { display:inline-block; padding:1px 8px; border-radius:10px; color:#fff; font-size:11.5px; font-weight:600; }
.u-hoog { background:var(--hoog); } .u-normaal { background:var(--normaal); } .u-laag { background:var(--laag); } .u-fout { background:#555; }
.st { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11.5px; font-weight:600; }
.st-nieuw { background:#e3f2fd; color:#0d47a1; } .st-open { background:#fff3e0; color:#8a4b00; } .st-afgehandeld { background:#e8f5e9; color:#1b5e20; }
.ch { display:inline-block; padding:1px 8px; border-radius:5px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.ch-bol { background:#0000a4; color:#fff; } .ch-amazon { background:#232f3e; color:#ff9900; } .ch-shopify { background:#5e8e3e; color:#fff; }
.ch-qls { background:#6a1b9a; color:#fff; } .ch-trustpilot { background:#00b67a; color:#fff; } .ch-email { background:var(--accent); color:#fff; }
.tag { display:inline-block; background:var(--soft); border:1px solid var(--line); border-radius:5px; padding:0 7px; font-size:12px; }
.tag.lang { background:#ede7f6; border-color:#d1c4e9; } .tag.warn { background:#fdecea; border-color:#f5c2c0; color:#8e1b1b; }
.tag.ok { background:#e8f5e9; border-color:#c8e6c9; color:#1b5e20; }
.tags { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* detail */
.actionbar { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:9px 12px; margin:6px 0 14px; }
.actionbar .sep { width:1px; height:22px; background:var(--line); margin:0 4px; }
.layout { display:grid; grid-template-columns:minmax(0, 3fr) minmax(300px, 2fr); gap:14px; align-items:start; }
.side { display:flex; flex-direction:column; gap:14px; position:sticky; top:62px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; min-width:0; box-shadow:var(--shadow); }
.side .card { margin-bottom:0; }
.msg { border:1px solid var(--line); border-radius:8px; padding:8px 11px; margin-bottom:8px; background:#fff; }
.msg-uit { background:#f4f8f2; border-color:#d6e5cf; }
.msg summary { cursor:pointer; }
pre.mail { white-space:pre-wrap; word-wrap:break-word; font:inherit; max-height:480px; overflow:auto; margin:8px 0 0; }
pre.library { max-height:none; margin:0; }
.thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.thumbs img { height:110px; width:auto; max-width:180px; object-fit:cover; border-radius:6px; border:1px solid var(--line); background:var(--soft); }
.thumbs a.file { display:inline-flex; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:6px; text-decoration:none; }
table.kv { border-collapse:collapse; } table.kv th { text-align:left; padding:3px 12px 3px 0; color:var(--muted); font-weight:500; white-space:nowrap; vertical-align:top; }
table.kv td { padding:3px 0; } table.kv.wide { width:100%; } table.kv.wide td, table.kv.wide th { padding:5px 8px 5px 0; border-bottom:1px solid var(--soft); }
td.num, th.num { text-align:right; }
ul.products { list-style:none; padding:0; margin:10px 0; display:flex; flex-direction:column; gap:8px; }
ul.products li { display:flex; gap:10px; align-items:center; }
ul.products img, ul.products .noimg { width:48px; height:48px; object-fit:cover; border-radius:6px; border:1px solid var(--line); background:var(--soft); flex:none; display:block; }
details.orders { margin-top:10px; border-top:1px dashed var(--line); padding-top:8px; }
details.orders ul { list-style:none; padding:0; margin:6px 0 0; }
details.orders li { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:4px 0; border-bottom:1px solid var(--soft); }
details.orders li.current { font-weight:600; }
.answer-head { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
.answer-head h2 { margin:0; }
details.translation { background:#f3f0fa; border:1px solid #d9d0ee; border-radius:8px; padding:8px 12px; margin:8px 0; }
.sendbar { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin:10px 0; padding:10px 12px; background:var(--soft); border-radius:8px; }
.sendbar .buttons { display:flex; gap:8px; flex-wrap:wrap; }
.sendinfo { font-size:13px; }
form.redo { margin:6px 0; }
.sentlist { padding-left:18px; }

/* afzenders */
table.senders { table-layout:fixed; }
table.senders th:nth-child(1) { width:22%; } table.senders th:nth-child(2) { width:9%; }
table.senders th:nth-child(4) { width:11%; } table.senders th:nth-child(5) { width:24%; }
table.senders td { overflow-wrap:anywhere; cursor:default; }
.radios label { display:inline-block; margin:0 10px 4px 0; }

@media (max-width: 900px) {
  .layout { grid-template-columns:1fr; } .side { position:static; }
  table.list th:nth-child(5), table.list td:nth-child(5), table.list th:nth-child(7), table.list td:nth-child(7) { display:none; }
  .topbar nav { order:3; width:100%; overflow-x:auto; }
}
td.klant { min-width:150px; max-width:220px; }
td.klant .name { display:block; font-weight:500; overflow-wrap:anywhere; }
td.klant .email { display:block; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }
.bolfiles { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:8px; padding:8px 10px; background:#eef0fb; border:1px solid #cfd4f3; border-radius:8px; }
tr.row-spoed td { background:#fdecea; } tr.row-spoed:hover td { background:#fbdcd9; }
tr.row-spoed td:first-child { box-shadow:inset 4px 0 0 var(--hoog); }
.tag.spoed { background:#c62828; border-color:#c62828; color:#fff; }
td.acts { white-space:nowrap; } td.acts form { margin-right:3px; }
button.mini.ok:hover { background:#c8e6c9; } button.mini.del:hover { background:#ffcdd2; }
a.bell { text-decoration:none; color:#fff; border-radius:6px; }
.dual { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dual .lbl { display:block; font-weight:600; font-size:13px; margin-bottom:4px; }
.dual #concept_nl { background:#faf8ff; border-color:#d9d0ee; }
@media (max-width: 900px) { .dual { grid-template-columns:1fr; } }
.me a { color:#fff; }
.loginpage { display:flex; min-height:100vh; align-items:center; justify-content:center; padding:16px; }
.logincard { width:100%; max-width:360px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:12px; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.logincard h1 { font-size:20px; margin:0 0 4px; } .logincard h1 span { font-weight:400; color:var(--muted); }
.logincard label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:13px; }
.logincard input { padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-weight:400; }
table.users td { cursor:default; vertical-align:middle; } table.users input { padding:4px 7px; border:1px solid var(--line); border-radius:6px; }