/* ============================================================
   CMS-admin styling — conform aan het frontend-merk.
   Kleuren/fonts/knoppen komen uit /assets/css/brand.css (zelfde bron
   als de website). Wijzig het merk in brand.css → CMS volgt automatisch.
   ============================================================ */

body {
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  background-color: var(--bg-soft, #f5f7fa);
  color: var(--body, #374151);
}

.admin {
  max-width: 960px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}

.admin > h1 {
  font-family: var(--font-head);
  color: var(--ink, #111827);
}
.admin > h1::after {
  content: '';
  display: block;
  width: 56px; height: 4px;
  margin-top: .5rem;
  background: var(--brand, #2563eb);
  border-radius: 999px;
}

a { color: var(--brand, #2563eb); }
.muted { color: var(--muted, #6b7280); }

/* ── Antwoord van de assistent (conversatie-/adviesmodus) ── */
.chat-answer {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-left: 4px solid var(--brand, #2563eb);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--ink, #111827);
}

/* ── Chatvenster (bubbels, zoals ChatGPT/Claude) ── */
.chat-page { max-width: 820px; }
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.chat-head h1 { margin: .25rem 0 0; }

.guide-details { margin: .5rem 0 1rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.guide-details > summary { cursor: pointer; padding: .6rem .9rem; font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.guide-details .guide { border: 0; box-shadow: none; margin: 0; }

.chat-thread {
  display: flex; flex-direction: column; gap: .85rem;
  min-height: 240px; max-height: 60vh; overflow-y: auto;
  padding: 1rem .25rem; scroll-behavior: smooth;
}

.msg { display: flex; }
.msg--user { justify-content: flex-end; }
.msg--assistant { justify-content: flex-start; }

.msg__bubble {
  max-width: 82%;
  padding: .7rem 1rem;
  border-radius: 16px;
  line-height: 1.55;
}
.msg--user .msg__bubble {
  background: var(--brand, #2563eb); color: #fff;
  border-bottom-right-radius: 4px;
}
.msg--assistant .msg__bubble {
  background: #fff; color: var(--ink, #111827);
  border: 1px solid var(--line, #e5e7eb);
  border-bottom-left-radius: 4px;
}
.msg__text { white-space: pre-wrap; }
.msg--error .msg__bubble { border-color: #fca5a5; color: #b91c1c; }
.typing { color: var(--muted, #6b7280); font-style: italic; }

/* Toepassen-kaart in een assistent-bubbel */
.chat-proposal {
  margin-top: .75rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: .75rem .85rem;
  background: var(--bg-soft, #f5f7fa);
}
.chat-proposal.invalid { border-color: #fca5a5; }
.chat-proposal__key { font-size: 11px; color: var(--muted, #6b7280); }
.chat-proposal__reason { font-size: 13px; color: var(--ink, #111827); margin: .25rem 0 .5rem; }
.chat-apply {
  margin-top: .6rem; padding: .45rem 1.1rem;
  font-size: .85rem; border-radius: 999px;
}
.chat-apply.is-applied { background: #15803d; }
.chat-apply:disabled { opacity: .7; }

/* Kleur-voorstelkaart (merkkleuren via de assistent) */
.chat-theme__head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7280); margin-bottom: .5rem; font-weight: 700; }
.chat-theme__row { display: flex; align-items: center; gap: .55rem; margin: .3rem 0; }
.chat-theme__name { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink, #111827); min-width: 96px; }
.chat-theme__swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.15); flex: none; }
.chat-theme__val { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted, #6b7280); }
.chat-theme__warn { margin-top: .55rem; padding: .5rem .7rem; border-radius: 8px; font-size: 12.5px; line-height: 1.45; background: #fbf1da; color: #8a5a00; }
.chat-theme__warn--block { background: #fbe9e6; color: #b42318; }

/* Foto meesturen: knop in de invoerbalk + preview-strook erboven */
.chat-photo-btn {
  flex: none; background: none; border: none; cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: .35rem .5rem; border-radius: 8px;
  color: var(--muted, #6b7280);
}
.chat-photo-btn:hover { background: var(--bg-soft, #f5f7fa); color: var(--brand, #2563eb); }
.chat-photo-btn.is-busy { opacity: .5; cursor: default; }
.chat-photo-preview {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; margin-bottom: .4rem;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--bg-soft, #f5f7fa);
}
.chat-photo-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.chat-photo-preview__name { font-size: 12.5px; color: var(--ink, #111827); flex: 1; word-break: break-word; }
.chat-photo-preview__remove {
  flex: none; background: none; border: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--muted, #6b7280); padding: .2rem .4rem; border-radius: 6px;
}
.chat-photo-preview__remove:hover { background: #fbe9e6; color: #b42318; }

/* Foto-voorstelkaart (assistent stelt een beeld-veld voor) */
.chat-image__head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7280); margin-bottom: .5rem; font-weight: 700; }
.chat-image__preview { max-width: 100%; max-height: 180px; border-radius: 8px; display: block; margin: .2rem 0 .5rem; }
.chat-image__field { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink, #111827); }
.chat-image__reason { font-size: 12.5px; color: var(--muted, #6b7280); margin-top: .3rem; }

/* Sectie-voorstelkaart (assistent voegt een nieuw blok toe) */
.chat-section__head { font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand, #2563eb); margin-bottom: .35rem; }
.chat-section__page { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--muted, #6b7280); margin-bottom: .5rem; }
.chat-section__preview { border-left: 3px solid var(--line, #e5e7eb); padding-left: .75rem; display: flex; flex-direction: column; gap: .2rem; }
.chat-section__line { font-size: 13px; color: var(--ink, #111827); line-height: 1.4; }
.chat-section__line.is-head { font-weight: 700; }
.chat-section__line.is-muted { color: var(--muted, #6b7280); font-size: 12px; }
.chat-section__reason { font-size: 12.5px; color: var(--muted, #6b7280); margin-top: .5rem; }

/* Project-voorstelkaart */
.chat-project__label { font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: .08em; color: var(--brand, #2563eb); margin-bottom: .5rem; }
.chat-project__row { display: flex; gap: .5rem; font-size: 13px; margin: .2rem 0; }
.chat-project__k { flex: 0 0 70px; color: var(--muted, #6b7280); }
.chat-project__v { flex: 1; color: var(--ink, #111827); }

/* "Pas alles toe"-balk boven meerdere voorstellen */
.chat-bulk { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 .5rem; flex-wrap: wrap; }
.chat-bulk__btn { font-weight: 700; }
.chat-bulk__label { font-size: 12px; color: var(--muted, #6b7280); }

/* Mediapagina — afbeeldingsvelden met preview + vervang-knop */
.media-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 1rem; }
.media-card { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.media-card__head { padding: .6rem .75rem; border-bottom: 1px solid var(--line, #e5e7eb); }
.media-card__label { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--ink, #111827); word-break: break-word; }
.media-card__page { font-size: 11px; color: var(--muted, #6b7280); margin-top: .15rem; }
.media-card__preview { position: relative; background: var(--bg-soft, #f5f7fa); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.media-card__preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.media-card__preview.is-empty img { display: none; }
.media-card__none { color: var(--muted, #6b7280); font-size: 12px; }
.media-card__actions { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; flex-wrap: wrap; }
.media-card__btn { font-size: 13px; }
.media-card__note { font-size: 12px; color: var(--muted, #6b7280); }
.media-card__note.ok { color: #15803d; }
.media-card__note.err { color: #b91c1c; }

/* Klikbare bestemmingen ("ga naar..."/"neem contact op...") met beschrijving */
.chat-links { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.chat-link {
  display: block; text-decoration: none; padding: .5rem .7rem;
  border: 1px solid var(--line, #e5e7eb); border-left: 3px solid var(--brand, #2563eb);
  border-radius: 8px; background: var(--bg-soft, #f5f7fa);
}
.chat-link:hover { border-color: var(--brand, #2563eb); background: #eef2ff; }
.chat-link__label { display: block; font-family: var(--font-head); font-weight: 700; color: var(--brand, #2563eb); }
.chat-link__label::after { content: " →"; }
.chat-link__desc { display: block; font-size: 12px; color: var(--muted, #6b7280); margin-top: .15rem; }

/* Bronnen (web/reddit-citaties) onder een antwoord */
.chat-sources { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--line, #e5e7eb); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chat-sources__label { width: 100%; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6b7280); margin-bottom: .15rem; }
.chat-source {
  display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; padding: .2rem .55rem; border: 1px solid var(--line, #e5e7eb); border-radius: 999px;
  background: var(--bg-soft, #f5f7fa); color: var(--brand, #2563eb); text-decoration: none;
}
.chat-source:hover { border-color: var(--brand, #2563eb); }
.chat-source--reddit { color: #d93a00; }
.chat-source--reddit::before { content: "reddit · "; color: var(--muted, #6b7280); }

/* Vast invoerveld onderaan */
.chat-input-bar {
  display: flex; align-items: flex-end; gap: .6rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--line, #e5e7eb);
}
.chat-input-bar textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 160px;
  border-radius: 14px; padding: .7rem 1rem; line-height: 1.4;
}
.chat-input-bar button {
  flex: 0 0 auto; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; font-size: 1.1rem; line-height: 1;
}

/* ── Login + dashboard ── */
#login, #dashboard {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.08));
  padding: 1.75rem;
  margin-top: 1.5rem;
}
/* Alleen de login blijft smal: dat is één wachtwoordveld, en een invoerveld
   over de volle breedte leest slechter, niet beter. Het dashboard is sinds de
   tegels een raster en heeft de hele container nodig; met 460px stapelden alle
   tegels onder elkaar en was het overzicht juist wég. */
#login { max-width: 460px; }

/* Alleen de EERSTE kop plakt tegen de bovenkant van de kaart. De koppen
   daarna scheiden twee groepen tegels en hebben hun ruimte nodig. */
#login h2, #dashboard > h2:first-of-type { margin-top: 0; }

.login-form, .chat-form { display: flex; flex-direction: column; gap: 0.7rem; }
.login-form label { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.chat-form textarea { resize: vertical; min-height: 4rem; }

/* Knoppen — brand-stijl (pill), net als de frontend */
button {
  background: var(--brand, #2563eb); color: #fff; border: 0;
  border-radius: 999px; padding: 0.7rem 1.4rem;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: background .2s, transform .15s;
}
button:hover { background: var(--brand-dark, #1d4ed8); transform: translateY(-1px); }
button:disabled { opacity: 0.5; cursor: default; transform: none; }
.link-button {
  background: none; color: var(--muted); padding: 0; font-weight: 500;
  text-decoration: underline; border-radius: 0;
}
.link-button:hover { background: none; color: var(--brand); transform: none; }
.dash-links { list-style: none; padding: 0; line-height: 2.2; font-family: var(--font-head); font-weight: 600; }

/* ── Dashboard: één tegel per onderdeel ────────────────────────────────
   De tegels van de lijsten bouwen zichzelf uit de collectie-declaratie,
   dus deze stijlen kennen geen enkele lijst bij naam. */
.dash-kop {
  font-family: var(--font-head); color: var(--ink, #111827);
  font-size: 1rem; text-transform: uppercase; letter-spacing: .04em;
  margin: 2rem 0 .75rem;
}
.dash-kop:first-of-type { margin-top: 1.25rem; }
.dash-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.dash-tegel {
  display: flex; flex-direction: column; gap: .35rem;
  background: #fff; border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px; padding: .9rem 1rem;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.dash-tegel:hover {
  border-color: var(--brand, #2563eb);
  transform: translateY(-2px);
}
.dash-tegel__kop { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.dash-tegel__titel { font-family: var(--font-head); font-weight: 700; color: var(--ink, #111827); }
/* Het aantal, niet een pijltje: in één blik zien of de wissel al gebeurd is. */
.dash-tegel__aantal {
  font-family: var(--font-head); font-weight: 700; font-size: .85rem;
  color: var(--brand, #2563eb); background: var(--bg-soft, #f5f7fa);
  border-radius: 999px; padding: .1rem .55rem; flex: none;
}
.dash-tegel__uitleg { font-size: .85rem; color: var(--muted, #6b7280); line-height: 1.45; }
.dash-verder { margin-top: 1.5rem; font-size: .9rem; color: var(--muted, #6b7280); }
/* Uitloggen hoort niet tegen de laatste tegel te plakken alsof het er een is. */
#dashboard #logout { margin-top: 1.75rem; }

/* ── Status + fouten ── */
.status { padding: 0.5rem 0.75rem; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.status.error, .error { color: #b91c1c; }
.status.warn { color: #b45309; }
.status.ok { color: #15803d; }

/* ── Voorstel-kaarten met vóór/na-diff ── */
.proposal { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; margin: 1rem 0; background: #fff; }
.proposal.invalid { border-color: #fca5a5; }
.proposal.applied { border-color: #86efac; opacity: 0.75; }
.proposal__head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-family: var(--font-head); color: var(--ink); }
.proposal__reason { color: var(--muted); margin: 0.4rem 0; }
.diff { padding: 0.5rem 0.75rem; border-radius: 6px; margin-top: 0.4rem; white-space: pre-wrap; }
.diff--before { background: #fef2f2; text-decoration: line-through; color: #b91c1c; }
.diff--after { background: #f0fdf4; color: #15803d; }
button.primary { margin-top: 0.5rem; }

/* ── Vaste uitleg: hoe het werkt + do's/don'ts ── */
.guide { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; background: #fff; }
.guide__title { margin-top: 0; }
.guide__steps { margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.6; }
.guide__cols { display: flex; flex-wrap: wrap; gap: 1rem; }
.guide__col { flex: 1 1 240px; border-radius: 6px; padding: 0.75rem 1rem; }
.guide__col h3 { margin: 0 0 0.5rem; font-size: 0.95rem; font-family: var(--font-head); }
.guide__col ul { margin: 0; padding-left: 1.1rem; line-height: 1.5; }
.guide__col--do { background: #f0fdf4; }
.guide__col--do h3 { color: #15803d; }
.guide__col--dont { background: #fef2f2; }
.guide__col--dont h3 { color: #b91c1c; }
.guide__tip { margin-bottom: 0; }

/* ── Lijsten beheren (collecties) ──────────────────────────────────────
   De pagina bouwt zich op uit de velddeclaratie van de server, dus deze
   stijlen kennen geen enkel veld bij naam. */
.col-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.25rem 0; }
.col-tab {
  background: #fff; color: var(--ink, #111827);
  border: 1px solid var(--line, #e5e7eb);
  padding: .45rem 1rem; font-size: .9rem;
}
.col-tab:hover { background: var(--bg-soft, #f5f7fa); color: var(--brand, #2563eb); transform: none; }
.col-tab.is-actief { background: var(--brand, #2563eb); color: #fff; border-color: var(--brand, #2563eb); }

.col-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.col-head h2 { margin: 0; font-family: var(--font-head); color: var(--ink, #111827); }
.col-head p { margin: .25rem 0 0; font-size: .9rem; max-width: 46rem; }

/* De lijst zelf */
.col-items { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.col-item {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px; padding: .6rem .75rem;
}
.col-item.is-verborgen { opacity: .55; }
.col-item__mini {
  width: 46px; height: 46px; flex: none; object-fit: contain;
  background: var(--bg-soft, #f5f7fa); border-radius: 6px;
}
.col-item__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.col-item__titel { font-family: var(--font-head); font-weight: 700; color: var(--ink, #111827); font-size: .95rem; }
.col-item__meta { font-size: 12px; color: var(--muted, #6b7280); }
.col-item__acties { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }

.col-mini {
  background: var(--bg-soft, #f5f7fa); color: var(--ink, #111827);
  border: 1px solid var(--line, #e5e7eb);
  padding: .35rem .7rem; font-size: 12.5px; font-weight: 600;
}
.col-mini:hover { background: #fff; color: var(--brand, #2563eb); transform: none; }
.col-mini--weg:hover { color: #b91c1c; border-color: #fca5a5; }

/* Het formulier */
.col-editor {
  margin-top: 1.25rem; padding: 1.25rem;
  background: #fff; border: 1px solid var(--line, #e5e7eb);
  border-left: 4px solid var(--brand, #2563eb); border-radius: 10px;
}
.col-editor h3 { margin: 0 0 1rem; font-family: var(--font-head); color: var(--ink, #111827); }
.col-veld { margin-bottom: 1rem; }
.col-veld__label {
  display: block; margin-bottom: .3rem;
  font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--ink, #111827);
}
.col-input {
  width: 100%; box-sizing: border-box;
  padding: .55rem .7rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--line, #e5e7eb); border-radius: 8px;
  background: #fff; color: var(--ink, #111827);
}
.col-input:focus { outline: 2px solid var(--brand, #2563eb); outline-offset: 1px; border-color: var(--brand, #2563eb); }
textarea.col-input { resize: vertical; line-height: 1.55; }
.col-editor__acties { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.col-note { font-size: 12.5px; color: var(--muted, #6b7280); }
.col-note.ok { color: #15803d; }
.col-note.err { color: #b91c1c; }

/* Beeldvelden */
.col-foto { display: flex; flex-direction: column; gap: .5rem; }
.col-foto__preview {
  max-width: 260px; max-height: 160px; object-fit: contain;
  background: var(--bg-soft, #f5f7fa); border-radius: 8px; display: block;
}
.col-foto.is-leeg .col-foto__preview { display: none; }
.col-foto__acties { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.col-foto__btn { font-size: 13px; }

.col-strook { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.col-strook__item { position: relative; display: inline-block; }
.col-strook__item img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line, #e5e7eb); display: block;
}
.col-strook__weg {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; padding: 0; line-height: 1;
  border-radius: 999px; font-size: 12px; background: #b91c1c;
}
.col-strook__weg:hover { background: #991b1b; transform: none; }


/* ── Bestandsveld (pdf) ────────────────────────────────────────────────
   Zelfde vorm als het fotoveld, maar zonder voorbeeld: van een pdf zegt
   een miniatuur niets, de bestandsnaam wel. */
.col-bestand { display: flex; flex-direction: column; gap: .5rem; }
.col-bestand__naam {
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  color: var(--brand, #2563eb); word-break: break-all;
}
.col-bestand.is-leeg .col-bestand__naam { color: var(--muted, #6b7280); font-weight: 500; }
.col-bestand__link { font-size: .85rem; }