/* Palet: helder blauw op koel wit, donkere marineblauwe tekst. */
:root {
  --bg: #f8faff;
  --surface: #ffffff;
  --ink: #0b1220;
  --text: #344054;
  --muted: #667085;
  --line: #e4eaf2;
  --accent: #1079fd;
  --accent-hover: #0b6ae0;
  --accent-ink: #ffffff;
  --accent-soft: #ebf3ff;
  --ok: #157a4f;
  --ok-soft: #e3f6ec;
  --warn: #9a6a12;
  --warn-soft: #fbf1db;
  --err: #dc2626;
  --err-soft: #fdeaea;
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #121b2e;
    --ink: #eef3fb;
    --text: #c9d3e3;
    --muted: #8a97ad;
    --line: #23304a;
    --accent: #3b93ff;
    --accent-hover: #5aa5ff;
    --accent-soft: #15284a;
    --ok: #5fd39c;
    --ok-soft: #12301f;
    --warn: #e9be63;
    --warn-soft: #33290f;
    --err: #f27171;
    --err-soft: #3a1717;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 "Schibsted Grotesk", system-ui, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); letter-spacing: -.025em; font-weight: 800; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
nav { display: flex; gap: .25rem; overflow-x: auto; }
nav[hidden] { display: none; }
nav button {
  border: 0; background: none; padding: .45rem .8rem; border-radius: 999px; cursor: pointer; color: var(--muted); white-space: nowrap;
}
nav button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

main { max-width: 1080px; margin: 0 auto; padding: 2rem clamp(16px, 4vw, 40px) 4rem; }

button.primary, button.ghost, button.chip {
  border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; border: 1px solid transparent; font-weight: 600;
}
button.primary { background: var(--accent); color: var(--accent-ink); }
button.primary:hover { background: var(--accent-hover); }
button.ghost { background: transparent; border-color: var(--line); }
button.ghost:hover { border-color: var(--ink); }
button.chip { padding: .35rem .75rem; font-size: .85rem; font-weight: 500; background: var(--bg); border-color: var(--line); }
button.chip:hover { border-color: var(--ink); }
button:disabled { opacity: .5; cursor: progress; }

.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }

input, select, textarea {
  width: 100%; padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
}
textarea { resize: vertical; min-height: 5rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.field { display: grid; gap: .3rem; font-size: .88rem; font-weight: 600; }
.field > span.hint { font-weight: 400; color: var(--muted); }
.grid2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* onboarding */
.hero { max-width: 640px; margin: 3rem auto; text-align: center; }
.hero p { color: var(--muted); font-size: 1.05rem; }
.url-form { display: flex; gap: .5rem; margin-top: 1.5rem; }
.url-form input { flex: 1; padding: .85rem 1rem; border-radius: 999px; }
.steps { text-align: left; margin: 2rem auto 0; max-width: 420px; display: grid; gap: .5rem; }
.step { display: flex; gap: .6rem; align-items: center; color: var(--muted); }
.step.done { color: var(--ink); }
.step.active { color: var(--ink); font-weight: 600; }
.step i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.step.done i { background: var(--ok); border-color: var(--ok); }
.step.active i { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* planning */
.plan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .5rem; }
.stats b { font-size: 1.4rem; display: block; }
.extra { margin-bottom: 2rem; display: grid; gap: .6rem; }
.extra .row textarea { flex: 1; min-height: 3rem; }

.week { margin: 2rem 0 .75rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.posts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post.skipped { opacity: .55; }
.post .media { aspect-ratio: 4/5; background: var(--bg); position: relative; cursor: pointer; }
.post .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post .media .idea { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; text-align: center; color: var(--muted); font-size: .9rem; border-bottom: 1px dashed var(--line); }
.post .media.working::after {
  content: "Beeld maken…"; position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 70%, transparent); font-weight: 600;
}
.composer { gap: .8rem; }
.composer textarea { min-height: 4.5rem; }
.composer-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; }
.composer-grid .field { font-weight: 600; }
fieldset.platforms { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
fieldset.platforms legend { padding: 0; margin-bottom: .3rem; }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; cursor: pointer; color: var(--muted); }
.seg input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }
.pf { display: inline-flex; gap: .35rem; align-items: center; font-size: .85rem; font-weight: 500; cursor: pointer; }
.pf input { width: auto; accent-color: var(--accent); }
.pf input:disabled + span { color: var(--muted); }
.pf-row { display: flex; flex-wrap: wrap; gap: .8rem; }
input.when { width: auto; padding: .3rem .5rem; font-size: .85rem; border-radius: 8px; }
.swatches { display: flex; gap: .4rem; flex-wrap: wrap; }
.swatches span { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); }
.creative-bar { display: flex; gap: .4rem; padding: .75rem 1.1rem 0; }
.creative-bar select { padding: .4rem .6rem; font-size: .85rem; border-radius: 999px; flex: 1; min-width: 0; }
.copy-form { display: grid; gap: .5rem; padding: .75rem 1.1rem 0; }
.copy-form[hidden] { display: none; }
.copy-form input { padding: .4rem .6rem; font-size: .85rem; }
.copy-form .field { font-weight: 500; }
button.chip.primary-chip { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.post .body { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .6rem; }
.post .meta { display: flex; justify-content: space-between; gap: .5rem; align-items: center; font-size: .85rem; }
.badge { font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); white-space: nowrap; }
.badge.scheduled { background: var(--accent-soft); border-color: transparent; }
.badge.published { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.failed { background: var(--err-soft); color: var(--err); border-color: transparent; }
.badge.skipped { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.caption { white-space: pre-wrap; font-size: .93rem; color: var(--text); }
.caption[contenteditable="true"] { outline: 2px solid var(--accent); border-radius: 6px; padding: .3rem; }
.tags { color: var(--accent); font-size: .85rem; word-break: break-word; }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.improve { display: flex; gap: .4rem; }
.improve input { padding: .4rem .7rem; font-size: .85rem; border-radius: 999px; }
.error { color: var(--err); font-size: .85rem; }
.empty { text-align: center; padding: 3rem 1rem; }

/* profile */
.section { margin-bottom: 1.5rem; display: grid; gap: 1rem; }
.images { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.images figure { margin: 0; position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg); }
.images img { width: 100%; height: 100%; object-fit: cover; }
.images button { position: absolute; top: 4px; right: 4px; border: 0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; background: rgba(0,0,0,.6); color: #fff; }

dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); width: min(720px, calc(100vw - 32px)); padding: 1.25rem; }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog form { display: grid; gap: 1rem; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; max-height: 50vh; overflow: auto; }
.picker-grid button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: var(--bg); }
.picker-grid button:hover { border-color: var(--accent); }
.picker-grid img { width: 100%; height: 100%; object-fit: cover; }

#toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%) translateY(150%);
  background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; border-radius: 999px; transition: transform .25s, opacity .25s; max-width: calc(100vw - 32px);
  opacity: 0; pointer-events: none;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.err { background: var(--err); color: #fff; }
#toast:not(.err) { background: var(--ink); }

@media (max-width: 560px) {
  .url-form { flex-direction: column; }
  .brand { font-size: 1rem; }
}

/* ---------- kalender ---------- */
.cal-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: -0.5rem 0 1rem; }
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; min-width: 770px; }
.cal-dow { background: var(--surface); padding: .5rem .6rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cal-dow.today { color: var(--accent); }
.cal-day { background: var(--surface); min-height: 128px; padding: .4rem; display: flex; flex-direction: column; gap: .3rem; transition: background .12s; }
.cal-day.other { background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.cal-day.other .cal-day-head span { color: var(--muted); }
.cal-day.past { background: var(--bg); }
.cal-day-head { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 600; }
.cal-day.today .cal-day-head span { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 .45rem; }
.cal-add { border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; opacity: 0; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { background: var(--accent-soft); color: var(--accent); }
.drop-ok { background: var(--accent-soft) !important; outline: 2px dashed var(--accent); outline-offset: -3px; }

.cal-post { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .4rem; width: 100%; padding: .25rem; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; font-size: .75rem; line-height: 1.25; position: relative; }

.cal-post:hover { border-color: var(--accent); }
.cal-post:focus-visible { outline: 2px solid var(--accent); }
.cal-post.dragging { opacity: .4; }
.cal-post img { pointer-events: none; -webkit-user-drag: none; }
.cal-post img, .cal-post .noimg { width: 34px; height: 42px; object-fit: cover; border-radius: 5px; flex: none; background: var(--line); }
.cal-post-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; }
.cal-post.compact .cal-post-text { -webkit-line-clamp: 2; }
.cal-post.skipped { opacity: .55; text-decoration: line-through; }
.dot-status { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--accent); }
.cal-post .dot-status { position: absolute; top: 4px; right: 4px; }
.cal-post.published .dot-status, .published-dot { background: var(--ok); }
.cal-post.failed .dot-status, .failed-dot { background: var(--err); }
.cal-post.skipped .dot-status, .skipped-dot { background: var(--warn); }
.scheduled-dot { background: var(--accent); }

.cal-week { display: grid; grid-template-columns: 56px repeat(var(--days), minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; min-width: 900px; }
.cal-week > div:first-child { background: var(--surface); }
.cal-hour { background: var(--surface); font-size: .72rem; color: var(--muted); padding: .3rem .4rem; text-align: right; }
.cal-slot { background: var(--surface); min-height: 54px; padding: .25rem; display: flex; flex-direction: column; gap: .25rem; }
.cal-slot.past { background: var(--bg); }

.post-dialog { width: min(440px, calc(100vw - 32px)); padding: 1rem; }
.post-dialog .post { box-shadow: none; }
.cal-post { touch-action: none; user-select: none; -webkit-user-select: none; }
.cal-post[data-movable=true] { cursor: grab; }
.cal-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; cursor: grabbing; box-shadow: 0 10px 24px rgba(11, 18, 32, .2); background: var(--surface); }

/* ---------- varianten: formaat en beweging ---------- */
.post .media.size-square { aspect-ratio: 1 / 1; }
.post .media.size-story { aspect-ratio: 9 / 16; }
.post .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.slides { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 1.1rem 0; }
.slide { flex: none; width: 64px; height: 80px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.slide:disabled { cursor: default; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-badge { position: absolute; left: .6rem; top: .6rem; background: rgba(11, 18, 32, .72); color: #fff; font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; }
.creative-bar .seg { flex: none; }
.cal-post .tag { font-style: normal; font-size: .65rem; font-weight: 600; background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 .25rem; }

/* ---------- agent ---------- */
.badge-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .7rem; font-weight: 700; margin-left: .2rem; }
.badge-count[hidden] { display: none; }
.badge.proposed { background: var(--warn-soft); color: var(--warn); border-color: transparent; border-style: dashed; }
.why { font-size: .82rem; background: var(--accent-soft); border-radius: 8px; padding: .45rem .6rem; color: var(--text); }
.why b { color: var(--accent); margin-right: .25rem; }
.approve-row { gap: .4rem; }
.agent-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 2rem; align-items: start; }
.agent-set { border: 1px solid var(--line); border-radius: 10px; padding: .8rem; display: grid; gap: .6rem; margin: 0; }
.agent-set legend { padding: 0 .3rem; font-weight: 600; }
.rhythm-slot { display: grid; gap: .35rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.rhythm-slot .row { align-items: center; flex-wrap: wrap; }
.qr { background: #fff; border-radius: 12px; padding: 8px; border: 1px solid var(--line); }
.run { margin-bottom: .6rem; padding: .8rem 1rem; }
.run summary { cursor: pointer; }
.run ul { margin: .6rem 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.cal-post.proposed { border-style: dashed; border-color: var(--warn); }
.cal-post.proposed .dot-status, .proposed-dot { background: var(--warn); }
button.chip.danger-chip { color: var(--err); }
button.chip.danger-chip:hover { border-color: var(--err); background: var(--err-soft); }

/* ---------- kennis en waarschuwingen ---------- */
.warn { font-size: .82rem; background: var(--warn-soft); color: var(--text); border-radius: 8px; padding: .5rem .6rem; display: grid; gap: .35rem; justify-items: start; }
.warn b { color: var(--warn); margin-right: .25rem; }
.cal-post .warn-tag { background: var(--warn-soft); color: var(--warn); }
.klist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.klist li { display: flex; gap: .6rem; align-items: center; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px; }
.klist li.expired { opacity: .55; }
.klist .ktext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.badge.kind-regel { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.kind-tijdelijk { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.kform { display: grid; grid-template-columns: 1fr auto auto auto; gap: .5rem; }
@media (max-width: 640px) { .kform { grid-template-columns: 1fr 1fr; } .kform input[name=text] { grid-column: 1 / -1; } }

/* Agent: subtabs Creatie / Analyse */
.subtabs { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); margin-bottom: 1.5rem; }
.subtabs button { border: 0; background: none; padding: .45rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.subtabs button.active { background: var(--accent); color: var(--accent-ink); }

/* Analyse */
.an-filter { gap: .8rem; }
.an-filter .row { align-items: flex-end; }
.an-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.an-accounts { border: 0; padding: 0; margin: 0; }
.an-accounts legend { padding: 0; margin-bottom: .3rem; }
.kpis { display: grid; gap: .75rem; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.5rem; }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { display: grid; gap: .2rem; padding: 1rem; }
.kpi b { font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.delta { font-size: .8rem; font-weight: 600; color: var(--muted); }
.delta.up { color: var(--ok); }
.delta.down { color: var(--err); }
.an-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.an-grid > .section, .an-grid h4 { margin: 0; }
.section h4 { margin: 0; }
.bars { display: grid; gap: .45rem; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: center; font-size: .85rem; }
.bar-row .bar-label { grid-column: 1 / -1; }
.bar-row b { text-align: right; font-variant-numeric: tabular-nums; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: .6rem; background: var(--accent-soft); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.weeks { display: flex; align-items: flex-end; gap: .3rem; height: 140px; }
.week { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3rem; height: 100%; min-width: 0; }
.week span { width: 100%; max-width: 2.2rem; background: var(--accent); border-radius: 6px 6px 2px 2px; }
.week small { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.an-headline { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 0; }
.an-cols { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.an-cols h4 { margin: 0 0 .5rem; }
.an-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .8rem; font-size: .9rem; }
.an-list .chip { margin-top: .4rem; }
.badge.prio-hoog { background: var(--err-soft); color: var(--err); border-color: transparent; }
.badge.prio-middel { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.prio-laag { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.an-posts { display: grid; gap: .6rem; }
.an-post { display: grid; grid-template-columns: 64px 1fr auto; gap: .8rem; align-items: center; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; }
.an-post img, .an-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--bg); display: block; }
.an-text { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-stats { display: grid; gap: .1rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .an-post { grid-template-columns: 48px 1fr; }
  .an-post img, .an-thumb { width: 48px; height: 48px; }
  .an-stats { grid-column: 1 / -1; display: flex; gap: 1rem; text-align: left; }
}

/* inbox */
.inbox { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
@media (max-width: 760px) { .inbox { grid-template-columns: 1fr; } }
.inbox-row { display: grid; gap: .15rem; width: 100%; text-align: left; background: var(--card, transparent); color: inherit; font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .4rem; cursor: pointer; }
.inbox-row.active { border-color: var(--accent, currentColor); }
.inbox-thread { padding: 1rem; display: grid; gap: .6rem; }
.inbox-comment { display: grid; gap: .4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.bubble { max-width: 85%; padding: .5rem .75rem; border-radius: 12px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.bubble.own { margin-left: auto; opacity: .85; }
.inbox-reply { display: grid; gap: .4rem; }
.inbox-reply textarea { width: 100%; }

/* klanten en login */
.topbar { border-top: 4px solid var(--client, transparent); }
#clientBar[hidden], #pauseBanner[hidden], #alertBanner[hidden], #logoutTop[hidden] { display: none; }
#logoutTop { font-size: .85rem; padding: .35rem .75rem; white-space: nowrap; flex: none; }
#alertBanner { background: #fef3f2; color: #b42318; border-bottom: 1px solid #fda29b; text-align: center; padding: .5rem 1rem; font-weight: 600; }
#clientSelect { font-weight: 600; max-width: 230px; border-color: var(--client, var(--line)); }
#pauseBanner { background: #b42318; color: #fff; text-align: center; padding: .5rem 1rem; font-weight: 600; }
.auth-card { max-width: 420px; margin: 3rem auto; }
.auth-form { display: grid; gap: .8rem; }
.auth-card .qr svg { display: block; }
.clients-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.client-row { padding: 1rem; margin-top: .8rem; }
.client-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.client-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.client-actions { flex-wrap: wrap; gap: .4rem; }
.client-audit { margin-top: .8rem; display: grid; gap: .2rem; max-height: 280px; overflow: auto; }
.agent-question { display: grid; gap: .5rem; margin-bottom: .8rem; }
.user-row { padding: .7rem 0; border-top: 1px solid var(--line); }
.user-new { display: grid; gap: .5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.user-new .qr svg { display: block; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0 .5rem; }
.bulk-bar.on { position: sticky; top: 56px; z-index: 5; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; }
.bulk-end { margin-left: auto; display: flex; gap: .4rem; }
article.post { position: relative; }
.bulk-check { position: absolute; top: .6rem; right: .6rem; z-index: 3; display: flex; padding: .4rem; background: rgba(255, 255, 255, .92); border-radius: 8px; cursor: pointer; }
.bulk-check input { width: 20px; height: 20px; }
article.post.bulk-picked { outline: 3px solid var(--accent, #2563eb); outline-offset: -3px; }
.topbar { flex-wrap: wrap; height: auto; row-gap: .4rem; }
#tabs { flex-wrap: wrap; overflow: visible; }

/* admin panel en AI-verbruik */
:root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948;
}
@media (prefers-color-scheme: dark) {
  :root {
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  }
}
.admin-section[hidden] { display: none; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.usage-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .8rem; }
.usage-filters select { margin-left: auto; max-width: 240px; }
.usage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.usage-stats .card { padding: .8rem 1rem; display: grid; gap: .2rem; }
.usage-stats b { font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .8rem; margin: .8rem 0; }
.usage-break { margin: 0; min-width: 0; }
.seg-mini { display: flex; gap: .3rem; }
.usage-legend { display: flex; flex-wrap: wrap; gap: .8rem; margin: .5rem 0 0; font-size: .82rem; color: var(--text); }
.usage-legend i, .usage-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; }
.usage-plot { position: relative; margin-top: .4rem; }
.usage-plot svg { display: block; width: 100%; height: auto; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.axis-text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.usage-tip { position: absolute; top: 4px; left: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; font-size: .8rem; color: var(--text); box-shadow: 0 6px 18px rgba(11, 18, 32, .12); pointer-events: none; white-space: nowrap; z-index: 4; }
.usage-tip[hidden] { display: none; }
.usage-tip b { color: var(--ink); }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; color: var(--text); }
.data-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .76rem; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.data-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table input[type="number"] { width: 84px; }
.nowrap { white-space: nowrap; }
.mini-bar { height: 6px; background: var(--accent-soft); border-radius: 3px; margin-bottom: .2rem; min-width: 60px; }
.mini-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* klant: geen knoppen voor wat de server toch weigert */
body.role-klant #regenPlan, body.role-klant #composeNow, body.role-klant [data-act="publish"], body.role-klant #runAgent, body.role-klant #agentForm, body.role-klant #kCheck { display: none; }
nav button[hidden] { display: none; }

/* foto's opladen */
.upload-label { cursor: pointer; display: inline-block; }
.drop-zone { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .8rem; margin-bottom: .8rem; border: 1px dashed var(--line); border-radius: 10px; }
.drop-active { outline: 2px dashed var(--accent); outline-offset: 2px; background: var(--accent-soft); }
.pending-box { padding: .8rem; margin-bottom: .8rem; border-radius: 10px; background: var(--warn-soft); }
.pending-box .images { margin-top: .6rem; }
.client-photo .qr svg { display: block; }
.client-photo code { overflow-wrap: anywhere; }
.cal-post.drop-swap { outline: 2px solid var(--accent); outline-offset: 1px; }
.post-dialog-bar { justify-content: space-between; position: sticky; top: 0; z-index: 4; background: var(--surface); padding-bottom: .6rem; }
.post-dialog .media { max-height: 46vh; }
.post-dialog .media img, .post-dialog .media video { max-height: 46vh; object-fit: contain; }