:root {
  --pico-font-size: 15px;
  --ok: #15803d; --ok-bg: #dcfce7;
  --bad: #b91c1c; --bad-bg: #fee2e2;
  --warn: #b45309; --warn-bg: #fef3c7;
  --up-bg: #fff1f2; --down-bg: #f0fdf4; --equal-bg: transparent;
  --line: #e5e7eb; --muted: #6b7280;
}
[x-cloak] { display: none !important; }
body { background: #f8fafc; }

/* Omgevingsbalk */
.envbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .45rem 1rem; color: #fff; font-size: .9rem; position: sticky; top: 0; z-index: 20; }
.envbar.staging { background: #15803d; }
.envbar.prod { background: #b91c1c; }
.envbar.prod strong::after { content: ' — ELKE SCHRIJFACTIE VRAAGT EXTRA BEVESTIGING'; font-weight: 400; }
.envbar code { background: rgba(255, 255, 255, .18); color: #fff; padding: .05rem .35rem; }
.envbar .pill { background: rgba(0, 0, 0, .25); border-radius: 1rem; padding: .05rem .6rem; font-size: .8rem; letter-spacing: .03em; }
.grow { flex: 1; }

.topnav { display: flex; gap: 1.25rem; align-items: center; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.topnav a { text-decoration: none; color: #374151; }
.topnav a.active { color: #0e7490; font-weight: 600; }
.topnav .brand { font-weight: 700; color: #155e75; margin-right: 1rem; }
.topnav .count { background: #0e7490; color: #fff; border-radius: 1rem; padding: 0 .45rem; font-size: .75rem; }

.wrap { padding: 1rem 1.25rem 3rem; max-width: 1900px; margin: 0 auto; }
h2 small, h3 small { color: var(--muted); font-weight: 400; font-size: .85rem; margin-left: .5rem; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.head h2 { margin: 0; }
.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.actions button, .toolbar button { margin: 0; width: auto; }
button.small { padding: .2rem .55rem; font-size: .8rem; }
.toolbar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: .75rem 0; }
.toolbar input[type=search], .toolbar select { margin: 0; width: auto; min-width: 16rem; }
.toolbar label { margin: 0; display: flex; gap: .35rem; align-items: center; white-space: nowrap; }
.toolbar label select { min-width: 12rem; }
form.inline { display: flex; gap: .5rem; align-items: center; margin: 0; }
form.inline input { margin: 0; }
form.inline button { width: auto; margin: 0; }
.prewrap { white-space: pre-line; }
.w5 { width: 5rem !important; display: inline-block; margin: 0 !important; padding: .2rem .4rem !important; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
.error { color: var(--bad); }
.notice { background: var(--warn-bg); border-left: 4px solid var(--warn); padding: .5rem .75rem; font-size: .9rem; }

.tabs { display: flex; justify-content: flex-start; gap: .25rem; border-bottom: 2px solid var(--line); margin-bottom: .75rem; }
.tabs a { padding: .4rem 1rem; text-decoration: none; color: #374151; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tabs a.active { border-color: #0e7490; color: #0e7490; font-weight: 600; }

.stats { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .9rem; align-items: baseline; }
.stats b { font-size: 1.05rem; }
.c-up b { color: var(--bad); } .c-down b { color: var(--ok); }

/* Tabellen */
.tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: .4rem; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 0; }
table.tbl th, table.tbl td { padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; background: transparent; }
table.tbl thead th { position: sticky; top: 0; background: #f1f5f9; font-weight: 600; white-space: nowrap; z-index: 1; }
table.tbl td.num, table.tbl th.num { text-align: right; white-space: nowrap; }
table.tbl input[type=checkbox] { margin: 0; }
tr.sel td { background: #ecfeff; }
tr.nomatch td { color: var(--muted); }
tr.inactive td { color: #9ca3af; }
tr.warnrow td { background: var(--warn-bg); }
tr.dir-up td { background: var(--up-bg); }
tr.dir-down td { background: var(--down-bg); }
td.desc { max-width: 28rem; }
td.desc .old { color: var(--muted); }
td.desc .new, td.new { color: #0f766e; }
td.desc .new::before { content: '→ '; }
td.old { color: var(--muted); text-decoration: line-through; text-decoration-color: #d1d5db; }
select.compact { font-size: .8rem; padding: .15rem .4rem; margin: 0 0 .2rem; height: auto; max-width: 30rem; }

.thumbs { white-space: nowrap; }
.thumbs img, .thumbs .noimg { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: .25rem; background: #fff; margin-right: 4px; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: #9ca3af; }
.thumbrow { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.thumbrow img { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--line); border-radius: .25rem; background: #fff; }
img.big { width: 160px; height: 160px; object-fit: contain; float: right; border: 1px solid var(--line); background: #fff; }

.tag { display: inline-block; font-size: .72rem; padding: .05rem .4rem; border-radius: .3rem; background: #f1f5f9; color: #334155; margin: .1rem .15rem .1rem 0; white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.chip { display: inline-block; background: #e0f2fe; border-radius: 1rem; padding: .05rem .6rem; margin: .1rem; font-size: .8rem; }
.chip a { text-decoration: none; color: var(--bad); margin-left: .2rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; }
.cards article { margin: 0; }
dl { display: grid; grid-template-columns: 9rem 1fr; gap: .2rem .75rem; margin: 0; font-size: .9rem; }
dt { color: var(--muted); }
dd { margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
ul.picklist { list-style: none; padding: 0; margin: 0 0 1rem; max-height: 14rem; overflow: auto; border: 1px solid var(--line); background: #fff; }
ul.picklist li { padding: .2rem .5rem; list-style: none; }

pre.log { max-height: 26rem; overflow: auto; font-size: .78rem; background: #0f172a; color: #e2e8f0; padding: .75rem; white-space: pre-wrap; }
progress { width: 8rem; margin: 0 .4rem 0 0; vertical-align: middle; }

dialog article.wide { max-width: min(1200px, 95vw); width: 95vw; }
dialog article.wide table { max-height: 60vh; }
.toast { position: fixed; bottom: 1rem; right: 1rem; background: #0f172a; color: #fff; padding: .7rem 1rem; border-radius: .4rem; max-width: 34rem; z-index: 50; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font-size: .9rem; }

@media (max-width: 700px) {
  .wrap { padding: .75rem 16px 2rem; }
  .toolbar input[type=search], .toolbar select { min-width: 0; width: 100%; }
  .cards { grid-template-columns: 1fr; }
}

/* Stap 3: opties per rij en bevestigingen */
td.opts label { display: block; margin: 0 0 .15rem; white-space: nowrap; font-size: .78rem; }
td.opts input[type=checkbox] { margin-right: .25rem; }
.warntext { color: var(--warn); }
article.confirmbox { border-left: 4px solid #0e7490; }
.placeholderbox { background: var(--warn-bg); border: 1px solid #f59e0b; padding: .6rem .8rem; border-radius: .3rem; margin: .5rem 0; }
.prodconfirm { display: block; background: var(--bad-bg); border: 1px solid var(--bad); padding: .6rem .8rem; border-radius: .3rem; margin: .5rem 0; color: var(--bad); font-weight: 600; }
.prodconfirm input { margin-top: .4rem; }

.envbar .pill.down { background: #b91c1c; color: #fff; font-weight: 700; }

/* Zoeken: brede tabellen in een smalle kaart horizontaal laten scrollen */
.cards article { overflow-x: auto; min-width: 0; }

/* Prijsafspraken */
.agreeform { display: grid; grid-template-columns: 2fr repeat(4, 1fr) 1.2fr 1.2fr; gap: .6rem; align-items: end; }
.agreeform label { margin: 0; font-size: .85rem; }
.agreeform input, .agreeform select { margin: .2rem 0 0; }
.agreeform .wide { grid-column: 1 / -1; }
.tag.agree { background: #ede9fe; color: #5b21b6; margin-left: .3rem; }
.agreebanner { background: #ede9fe; border-left: 4px solid #7c3aed; padding: .5rem .75rem; font-size: .9rem; }
.agreebanner.soft { background: #f5f3ff; border-left-color: #c4b5fd; }
td.nowrap { white-space: nowrap; }
textarea { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
@media (max-width: 900px) { .agreeform { grid-template-columns: 1fr 1fr; } }

/* Categorieën */
.w30 { width: 22rem !important; min-width: 0 !important; margin: 0 !important; }
.picklist a.muted { color: #9ca3af; }