/* AI Book, live editie
   Neutrale Studio 19-huisstijl: donker met amber accent.
   Klantcustomisatie beperkt zich tot naam en logo; deze tokens
   zijn voor alle klanten gelijk. */

/* Zelf-gehoste fonts (SIL Open Font License) i.p.v. de Google Fonts CDN,
   zodat er geen bezoeker-IP naar Google lekt. Latin-subset, woff2. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/public/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/public/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/public/fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/public/fonts/space-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/public/fonts/space-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  --bg: #0c0a09;
  --bg-raise: #1c1917;
  --text: #f5f5f4;
  --muted: #a8a29e;
  --amber: #f59e0b;
  --amber-licht: #fbbf24;
  /* Tekst OP een accent-vlak (knoppen, badges, selectie). Deze token staat
     bewust alleen hier in :root, niet nogmaals in html[data-theme="light"]:
     de vijf regels die hem gebruiken gaven in het lichte thema voorheen
     var(--bg) door, wat daar #fafaf9 was, zelf tegen amber maar 2,06:1
     contrast (feitelijk onleesbaar). Door dezelfde --op-accent-waarde
     (#0c0a09, 9,20:1) in beide thema's te gebruiken is dat meteen gefixt.
     Dit is dus een bewuste contrastcorrectie, geen stilzwijgende bijvangst
     van het invoeren van dit token. */
  --op-accent: #0c0a09;
  --emerald: #34d399;
  --red: #f87171;
  --blue: #60a5fa;
  --card: rgba(28, 25, 23, 0.6);
  --border: #292524;
  --link: #fbbf24;
  --body-text: #d6d3d1;
  --topbar-bg: rgba(12, 10, 9, 0.92);
  --code-text: #fbbf24;
  --pre-text: #e7e5e4;
  --badge-live-text: #34d399;
  --badge-dev-text: #fbbf24;
  --panel-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  --sans: "DM Sans", system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

html[data-theme="light"] {
  --bg: #fafaf9;
  --bg-raise: #f0efed;
  --text: #1c1917;
  --muted: #78716c;
  --card: #ffffff;
  --border: #e7e5e4;
  --link: #b45309;
  --body-text: #33302e;
  --topbar-bg: rgba(250, 250, 249, 0.92);
  --code-text: #b45309;
  --pre-text: #33302e;
  --badge-live-text: #047857;
  --badge-dev-text: #b45309;
  --panel-shadow: 0 20px 50px rgba(28, 25, 23, 0.18);
}

* { box-sizing: border-box; }

/* Het hidden-attribuut moet altijd winnen van author-display-regels. Zonder
   dit blijft bijvoorbeeld het chatpaneel (.chat-panel { display: flex })
   zichtbaar ondanks hidden, en is het niet te sluiten. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}

::selection { background: var(--amber); color: var(--op-accent); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brandlogo {
  height: 26px;
  width: 26px;
  border-radius: 6px;
  display: block;
}
.brandname { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brandtag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 10px;
}
.topsearch { display: flex; gap: 8px; flex: 0 1 380px; }
.topsearch input {
  flex: 1;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
}
.topsearch input::placeholder { color: var(--muted); }
.topsearch button {
  background: var(--amber);
  color: var(--op-accent);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.topsearch button:hover { background: var(--amber-licht); }

/* Layout met zijnavigatie */
.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}
/* Kale layout zonder zijbalk, bijvoorbeeld op de aanmeldpagina */
.layout-bare { grid-template-columns: minmax(0, 1fr); }
.sidenav {
  position: sticky;
  top: 72px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow: auto;
  padding-right: 8px;
}
.navtitle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 8px;
}
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav li { margin: 1px 0; }
.sidenav a {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
}
.sidenav a:hover { background: var(--bg-raise); color: var(--text); text-decoration: none; }
.navgroup { font-weight: 500; color: var(--text) !important; }
.navcount {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
}
.sidenav ul ul { margin-left: 10px; border-left: 1px solid var(--border); }
.navall { color: var(--link) !important; font-weight: 500; }

/* Nieuw-indicator: een klein amber stipje na de sectiekop, en vetgedrukte
   nieuwe items in de boom. button.navtitle is al flex met gap, dus de stip
   krijgt vanzelf ruimte tussen de tekst en de chevron. */
.navstip {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--amber);
  display: inline-block;
}
.navnieuw { font-weight: 700; }

/* Inklapbare navigatie: de sectietitels zijn knoppen (zelfde uiterlijk als de
   oude p.navtitle), de categoriegroepen krijgen een chevron ernaast. */
button.navtitle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
button.navtitle:hover { color: var(--text); }
.navchevron {
  width: 7px; height: 7px; flex: 0 0 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.navtoggle[aria-expanded="false"] .navchevron { transform: rotate(-45deg); }
.navgrouprow { display: flex; align-items: center; }
.navgrouprow .navgroup { flex: 1 1 auto; }
.navchev {
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  color: var(--muted); display: inline-flex; align-items: center;
}
.navchev:hover { color: var(--text); }

/* Beheer: uploadvakken als dropzone en de tabelfilter. */
.dropzone.dragover { outline: 2px dashed var(--amber); outline-offset: 4px; border-radius: 8px; }
.drophint { color: var(--muted); font-size: 12px; }
.tablefilter { margin: 18px 0 6px; }
.tablefilter input {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  background: var(--bg-raise); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-family: var(--sans); font-size: 14px;
}

/* Bibliotheek met opgeladen bestanden. */
.assetgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px; margin-top: 16px;
}
.assetcard {
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  padding: 10px; display: flex; flex-direction: column; gap: 6px;
}
.assetthumb {
  display: block; width: 100%; height: 120px; object-fit: contain;
  background: var(--bg-raise); border-radius: 6px;
}
a.assetpdf {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; color: var(--muted) !important;
  text-decoration: none;
}
.assetname {
  margin: 0; font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.assetmeta { margin: 0; font-size: 12px; color: var(--muted); }
.assetsnippet { display: flex; align-items: center; gap: 6px; }
.assetsnippet code {
  flex: 1 1 auto; font-size: 11px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 4px 6px; background: var(--bg-raise); border-radius: 6px;
}

/* Bibliotheek: verwijderen, vervangen en logo kiezen (B2). */
.assetcard { position: relative; }
.assetcard.is-logo { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25); }
.logobadge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--amber); color: var(--op-accent); border-radius: 999px; padding: 2px 8px;
}
.assetacties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.assetacties .acties-form { margin: 0; }
.assetacties .btn { font-size: 12px; padding: 4px 8px; }
.vervanglabel { cursor: pointer; display: inline-flex; align-items: center; }
.vervanglabel .vervanginput { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.assetacties .gevaar { border-color: rgba(248, 113, 113, 0.5); color: var(--red); }
.assetacties .gevaar:hover { background: rgba(248, 113, 113, 0.12); }
.assetacties .gevaar[disabled] { opacity: 0.5; cursor: not-allowed; }
.assetref { font-size: 11px; margin: 2px 0 0; }

/* Editor: suggestiepaneel voor !image. */
.editorwrap { position: relative; }
.assetsuggest {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 30;
  background: var(--bg-raise); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--panel-shadow); max-height: 240px; overflow-y: auto; padding: 4px;
}
.assetsuggest-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; padding: 6px 8px; border-radius: 6px;
  color: var(--text); font-family: var(--sans); font-size: 13px; cursor: pointer; text-align: left;
}
.assetsuggest-item:hover { background: var(--card); }
.assetsuggest-item img {
  width: 34px; height: 26px; object-fit: cover; border-radius: 4px; flex: 0 0 34px;
  background: var(--bg);
}

/* Hero */
.hero { margin: 14px 0 34px; }
.hero h1 {
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.herosub {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* Groepen en kaarten */
.groupsection { margin: 36px 0; }
.grouphead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.grouphead h2 {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
}
.grouplink {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.cards-list { grid-template-columns: 1fr; max-width: 760px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 14px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover {
  border-color: rgba(245, 158, 11, 0.45);
  transform: translateY(-2px);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.card h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; font-weight: 700; }
.card h3 a { color: var(--text); }
.card h3 a:hover { color: var(--link); }
.cardsummary { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.cardmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }

/* Badges en chips */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.badge-live {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--badge-live-text);
}
.badge-in-ontwikkeling {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.4);
  color: var(--badge-dev-text);
}
.badge-gearchiveerd {
  background: rgba(168, 162, 158, 0.1);
  border-color: var(--border);
  color: var(--muted);
}

/* Compliance: AI-register risicoklasse-badges + tabel */
.badge.risk-onaanvaardbaar { background: rgba(248, 113, 113, 0.22); border-color: rgba(248, 113, 113, 0.55); color: var(--red); }
.badge.risk-hoog { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.4); color: var(--red); }
.badge.risk-beperkt { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.4); color: var(--badge-dev-text); }
.badge.risk-minimaal { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); color: var(--badge-live-text); }
.tablewrap { overflow-x: auto; }
.registertable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.registertable th, .registertable td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.registertable th {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); white-space: nowrap;
}
.registertable a { color: var(--link); }
.muted { color: var(--muted); font-size: 12px; }
.registerlegende { margin-top: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.compliancefields { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px 4px; margin: 6px 0 14px; }
.compliancefields legend { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 0 6px; }
/* Leesbevestiging + geletterdheidsoverzicht */
.leesbevestiging { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.lees-ok { color: var(--badge-live-text); font-size: 14px; margin: 0; }
.lees-changed { color: var(--badge-dev-text); font-size: 14px; margin: 0 0 8px; }
.geletterdheid-doc { margin: 18px 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.geletterdheid-doc h3 { margin: 0 0 6px; font-size: 16px; }
.confirmerlist { list-style: none; margin: 6px 0 0; padding: 0; }
.confirmerlist li { padding: 3px 0; font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Conformiteitsoverzicht (print-rapport) */
.conformiteit { max-width: 820px; margin: 0 auto; }
.conformiteit-head h1 { margin: 0 0 4px; }
.conformiteit-sub { font-family: var(--mono); color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.conformiteit-sectie { margin: 24px 0; }
.conformiteit-sectie h2 { font-size: 18px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.conformiteit-foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
@media print {
  .topbar, .themetoggle, .noprint, .sitefoot, .chat-fab { display: none !important; }
  .layout { display: block; padding: 0; }
  .conformiteit { max-width: none; }
  .conformiteit-sectie { page-break-inside: avoid; }
  .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}
.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  color: var(--muted);
}
.date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

/* Updates-strook op de homepagina */
.updatestrip { margin: 44px 0 0; }
.updatelist { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.updatelist li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.updatelist .date { display: block; margin-bottom: 2px; }
.updatelist a { font-weight: 700; font-size: 16px; color: var(--text); }
.updatelist a:hover { color: var(--link); }
.updatesummary { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

/* Documentpagina */
.breadcrumb {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--link); }
.breadcrumb .current { color: var(--text); }
.docpage { max-width: 760px; }
.dochead h1 {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.metarow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.bronlink {
  font-family: var(--mono);
  font-size: 12px;
}

.article h2 {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 34px 0 10px;
}
.article h3 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; }
.article p { margin: 0 0 14px; color: var(--body-text); }
.article ul, .article ol { margin: 0 0 14px; padding-left: 22px; color: var(--body-text); }
.article strong { color: var(--text); }
.article code {
  font-family: var(--mono);
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
  color: var(--code-text);
}
.article pre {
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13px;
}
.article pre code { background: none; border: none; padding: 0; color: var(--pre-text); }
.article img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 6px 0 10px;
}
.article blockquote {
  margin: 0 0 14px;
  padding: 8px 16px;
  border-left: 3px solid var(--amber);
  background: var(--card);
  border-radius: 0 8px 8px 0;
}
.article table { border-collapse: collapse; margin: 0 0 16px; width: 100%; }
.article th, .article td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; font-size: 14px; }
.article th {
  background: var(--bg-raise);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.docfoot {
  margin-top: 40px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

/* Zoek- en lijstpagina's */
.searchpage h1, .listpage h1 {
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.listintro { color: var(--muted); margin: 0 0 22px; }
.resultlist { list-style: none; margin: 22px 0 0; padding: 0; max-width: 760px; }
.resultlist li { padding: 14px 0; border-bottom: 1px solid var(--border); }
.resultlist h3 { margin: 4px 0; font-size: 17px; }
.resultmeta { display: flex; gap: 8px; align-items: center; margin: 0; }
.snippet { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

/* Sitefooter */
.sitefoot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 90px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.sitefoot a { color: var(--link); }

/* Chat */
.chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: var(--amber);
  color: var(--op-accent);
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
  z-index: 30;
}
.chat-fab:hover { background: var(--amber-licht); }
.chat-panel {
  position: fixed;
  right: 22px;
  bottom: 80px;
  width: min(380px, calc(100vw - 44px));
  height: 460px;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--panel-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.chat-head button {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.chat-head button:hover { color: var(--text); }
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.chat-msg.user {
  align-self: flex-end;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.chat-msg.bot {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--body-text);
}
.chat-msg .sources { margin-top: 6px; font-family: var(--mono); font-size: 11px; }
.chat-msg .sources a { display: inline-block; margin-right: 8px; }
/* Markdown-opmaak binnen een assistent-antwoord (zie renderMarkdown in app.js) */
.chat-msg ul, .chat-msg ol { margin: 4px 0; padding-left: 20px; }
.chat-msg li { margin: 2px 0; }
.chat-msg .chat-h { display: inline-block; margin: 6px 0 2px; }
.chat-msg code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
}
.chat-msg a { color: var(--link); }
.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}
.chat-form input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
}
.chat-form button {
  background: var(--amber);
  color: var(--op-accent);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
.chat-form button:hover { background: var(--amber-licht); }

/* Responsief */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidenav { display: none; }
  .topsearch { flex: 1; }
  .brandtag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* Topbar-acties en themaschakelaar */
.topactions { display: flex; align-items: center; gap: 10px; flex: 0 1 460px; }
.themetoggle {
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.themetoggle:hover { color: var(--text); border-color: var(--muted); }
.theme-light-icon { display: none; }
html[data-theme="light"] .theme-dark-icon { display: none; }
html[data-theme="light"] .theme-light-icon { display: inline; }

/* Linkkaarten */
.linkcard { display: block; color: var(--text); }
.linkcard:hover { text-decoration: none; }
.linkcard h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }

/* Formulieren (login en beheer) */
.loginpage { max-width: 380px; margin: 8vh auto 0; }
.loginform label, .editform label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.loginform input, .editform input, .editform select, .editform textarea,
.toolform input, .toolform select {
  width: 100%;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
}
.editform textarea { font-family: var(--mono); font-size: 13px; line-height: 1.6; resize: vertical; }
.loginform button, .btn {
  display: inline-block;
  background: var(--amber);
  color: var(--op-accent);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.loginform button { width: 100%; margin-top: 14px; }
.loginform button:hover, .btn:hover { background: var(--amber-licht); text-decoration: none; }

/* Lichtere, secundaire knop: amber omranding zonder opvulling, naast de volle
   amber-CTA. Tekst via --link zodat hij in beide thema's leesbaar blijft
   (helder amber op donker, dieper amber op licht). Na .btn:hover in de bron
   zodat de ghost-hover wint bij gelijke specificiteit. */
.btn-ghost {
  background: transparent;
  color: var(--link);
  border: 1px solid var(--amber);
  font-weight: 600;
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border-color: var(--amber-licht);
  color: var(--link);
  text-decoration: none;
}
.loginsep { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0 6px; }

/* Aanmeldpagina: gelijkwaardige, neutrale opties onder elkaar. De logo's
   dragen de merkkleur; de knoppen zelf blijven ongekleurd. */
.loginopties { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.loginbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; box-sizing: border-box; padding: 11px 16px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-raise); color: var(--text);
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  cursor: pointer; text-decoration: none;
}
.loginbtn:hover { border-color: var(--muted); text-decoration: none; }
.loginbtn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.logindetails summary { list-style: none; }
.logindetails summary::-webkit-details-marker { display: none; }
.logindetails .loginform { margin-top: 4px; padding: 0 2px; }
.loginpw { margin-top: 22px; text-align: center; }
.loginpw .loginform { text-align: left; }
.linklike {
  display: inline-block; background: none; border: none; padding: 4px;
  color: var(--muted); font-family: var(--sans); font-size: 13px;
  text-decoration: underline; cursor: pointer;
}
.linklike:hover { color: var(--text); }

/* Gebruikersbeheer: compacte icoonknoppen met label en de rol-select. */
.iconbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px;
  background: transparent; color: var(--link); border: 1px solid var(--amber); font-weight: 500;
}
.iconbtn:hover { background: color-mix(in srgb, var(--amber) 12%, transparent); border-color: var(--amber-licht); }
.iconbtn svg { width: 13px; height: 13px; flex: 0 0 13px; }
.acties { white-space: nowrap; }
.acties form, .rolform { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.rolselect {
  padding: 5px 6px; font-size: 12px; border-radius: 6px;
  background: var(--bg-raise); color: var(--text); border: 1px solid var(--border);
  font-family: var(--sans);
}
.formerror {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: var(--red);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
}
.flash {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: var(--badge-live-text);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
}

/* Beheer */
.adminpage { max-width: 900px; }
.adminpage h1 { font-weight: 700; font-size: 30px; letter-spacing: -0.02em; margin: 0; }
.admintools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 20px 0 26px;
}
.toolform {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toollabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.toolform button {
  align-self: flex-start;
  background: transparent;
  color: var(--link);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.toolform button:hover { background: color-mix(in srgb, var(--amber) 12%, transparent); border-color: var(--amber-licht); }
.admintable { border-collapse: collapse; width: 100%; }
.admintable th, .admintable td {
  border-bottom: 1px solid var(--border);
  padding: 9px 10px;
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
}
.admintable th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rowactions { white-space: nowrap; }
.rowactions form { display: inline; margin-left: 10px; }
.linkbutton {
  background: none;
  border: none;
  color: var(--red);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.linkbutton:hover { text-decoration: underline; }
.editform { max-width: 760px; }
.formrow { margin: 0 0 16px; }
.formgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.formactions { display: flex; align-items: center; gap: 16px; margin-top: 6px; }

/* Categorieenbeheer. */
.catdelete { display: inline-block; margin: 6px 8px 0 0; }
.cath2 { margin-top: 32px; font-size: 20px; }
.registertable input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  background: var(--bg-raise); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font-family: var(--sans); font-size: 13px;
}

/* Rijke tips/nieuws-kaart: uitgelichte afbeelding en stroom-chip. */
.card .cardimg { display: block; margin: -2px 0 10px; }
.card .cardimg img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; display: block; }
/* .chip-stroom gebruikte hier voorheen var(--amber) rauw als tekstkleur. Dat
   is nu var(--link), dezelfde contrastveilige afleiding als de rest van de
   linkachtige amber-tekst. Ook zonder ACCENT_KLEUR verandert dat het uiterlijk
   in het donkere thema (--amber #f59e0b naar --link #fbbf24, contrast 8,61:1
   naar 11,08:1): een bewuste contrastcorrectie, net als bij --op-accent
   hierboven, geen stilzwijgende bijvangst. */
.chip-stroom { text-transform: none; border-color: var(--amber); color: var(--link); }

/* Nieuwsstromen als keuzekaarten (B3): de checkbox is verborgen, de kaart is de
   toggle; gekozen krijgt een amber-rand en een amber-vink. */
.stroomkaart { cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.stroomkaart input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.stroomkaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stroomkaart-naam { font-weight: 700; font-size: 16px; }
.stroomkaart-vink {
  width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--border); flex: 0 0 18px;
}
.stroomkaart-meta { color: var(--muted); font-size: 13px; font-family: var(--mono); }
.stroomkaart-aan { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25); }
.stroomkaart-aan .stroomkaart-vink { border-color: var(--amber); background: var(--amber); }
.stroomkaart:has(input:checked) { border-color: var(--amber); }
.stroomkaart:has(input:checked) .stroomkaart-vink { border-color: var(--amber); background: var(--amber); }