/* Kringwinkel 't Rad — huisstijl: zwart en oranje (#FF6100); analysetool roze (#FFA1FF) */
:root {
  --bg:#f7f6f3; --vlak:#ffffff; --fg:#1d1d1b; --muted:#5f625e; --rand:#dcdcd7; --zacht:#efeeea;
  --knop:#1d1d1b; --knop-fg:#ffffff; --fout:#b3261e; --logo-filter:none;
  /* Hoofdkleur Kringwinkel: oranje #FF6100 */
  --accent:#ff6100; --accent-zacht:#ffe6d6; --link:#b84500;
  --reeks1:#1d1d1b; --reeks2:#ff6100; --reeks3:#8a8a84; --reeks4:#ffb385;
}
/* Analysetool: nevenkleur roze/paars */
body[data-thema="analyse"] {
  --accent:#ffa1ff; --accent-zacht:#ffe3ff; --link:#a3009e;
  --reeks2:#e05ce0; --reeks4:#f2b8f2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#141413; --vlak:#1e1e1c; --fg:#ecece8; --muted:#a5a6a0; --rand:#353532; --zacht:#272725;
    --knop:#ff6100; --knop-fg:#1d1d1b; --fout:#f2b8b5; --logo-filter:invert(1);
    --accent:#ff6100; --accent-zacht:#3a2618; --link:#ff8a3d;
    --reeks1:#ecece8; --reeks2:#ff7a2a; --reeks3:#8f908a; --reeks4:#b8521a;
  }
  body[data-thema="analyse"] {
    --knop:#ffa1ff; --accent:#ffa1ff; --accent-zacht:#3a2a3a; --link:#ffa1ff;
    --reeks2:#ffa1ff; --reeks4:#b45cb4;
  }
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.muted { color:var(--muted); }
.klein { font-size:.85rem; }
.fout { color:var(--fout); margin-top:16px; }
a { color:var(--link); }

button { font:inherit; font-weight:600; padding:10px 18px; border-radius:8px; border:1px solid var(--knop);
         background:var(--knop); color:var(--knop-fg); cursor:pointer; }
button.secundair { background:transparent; color:var(--fg); border-color:var(--rand); }
button.link { background:none; border:none; padding:4px 6px; color:var(--link); font-weight:600; }
button.klein-knop { padding:4px 10px; font-size:.85rem; font-weight:500; background:transparent; color:var(--muted); border-color:var(--rand); }
button.breed { width:100%; }
button:focus-visible, textarea:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:disabled { opacity:.6; cursor:default; }

/* Draaiend roze rad tijdens het laden */
.spinner { width:56px; height:56px; animation:draai 1.4s linear infinite; }
.spinner.klein { width:22px; height:22px; vertical-align:middle; margin-right:8px; }
@keyframes draai { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration:4s; } }

/* Huisstijlfonts (lokaal, CSP: enkel eigen domein) */
@font-face { font-family:"Parafina"; src:url("/vendor/fonts/parafina-black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Cooper Lt BT"; src:url("/vendor/fonts/cooper-light.woff2") format("woff2"); font-weight:300 400; font-style:normal; font-display:swap; }

/* Poort: aanmelden, aanvragen, status */
.poort { min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(360px, 520px) 1fr;
         font-family:"Cooper Lt BT", Georgia, "Times New Roman", serif; }
.poort-paneel { background:var(--vlak); display:flex; flex-direction:column; justify-content:center;
                padding:max(48px, env(safe-area-inset-top)) clamp(28px, 6vw, 72px) max(48px, env(safe-area-inset-bottom)); }
.poort-logo { width:min(260px, 70vw); height:auto; filter:var(--logo-filter); margin-bottom:56px; }
.poort-titel { font-family:"Parafina", "Arial Black", Impact, sans-serif; font-weight:900; font-size:2.75rem; line-height:1.05;
               text-transform:uppercase; color:var(--fg); margin:0 0 14px; letter-spacing:0; }
.poort .poort-intro { color:var(--muted); margin:0 0 28px; max-width:40ch; }
.poort p { margin-top:0; }
.poort-laden { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.poort button { font-family:inherit; }

.ms-knop { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:14px 20px;
           border-radius:8px; border:1px solid #8a8a8a; background:#fff; color:#1d1d1b; font-weight:400; font-size:1rem;
           transition:border-color .15s, box-shadow .15s; }
.ms-knop:hover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.ms-knop svg { flex:none; }
.poort-knop { width:100%; padding:14px 20px; border-color:var(--accent); background:var(--accent); color:#fff; font-weight:400; font-size:1rem; }
.poort-knop:hover { background:#d95200; border-color:#d95200; }
.poort .poort-voet { margin:32px 0 0; font-size:.95rem; color:var(--muted); }
.poort .poort-link { padding:0; font-weight:400; text-decoration:underline; text-underline-offset:3px; color:var(--link); }

.poort-form { display:flex; flex-direction:column; gap:14px; }
.poort-form label { display:flex; flex-direction:column; gap:6px; font-size:.95rem; color:var(--fg); }
.poort-form input { font:inherit; padding:11px 12px; border:1px solid #8a8a8a; border-radius:8px; background:var(--vlak); color:var(--fg); }
.poort-form input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.poort-rij { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.poort-rij label { min-width:0; }
.poort-honing { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.poort-melding { margin:0; }

.poort-beeld { background:#cfcac2 url("/img/login.webp") center 35% / cover no-repeat; position:relative; }
.poort-beeld::after { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--accent); }

@media (max-width: 820px) {
  .poort { grid-template-columns:1fr; grid-template-rows:34vh auto; }
  .poort-beeld { grid-row:1; background-position:center 30%; }
  .poort-beeld::after { top:auto; right:0; width:auto; height:6px; }
  .poort-paneel { grid-row:2; justify-content:flex-start; padding-top:32px; }
  .poort-logo { margin-bottom:32px; }
  .poort-titel { font-size:2.25rem; }
}
@media (max-width: 420px) { .poort-rij { grid-template-columns:1fr; } }

.geen-tools { margin-top:16px; }
.geen-tools p { margin:0 0 10px; }

/* App */
.app { height:100vh; display:flex; flex-direction:column; }
.kop { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px;
       border-bottom:1px solid var(--rand); background:var(--vlak); }
.merk { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg); min-width:0; }
.merk img { height:32px; width:auto; filter:var(--logo-filter); }
.kop-tool { font-weight:600; padding-left:12px; border-left:2px solid var(--accent); white-space:nowrap; }
.kop-tool:empty { display:none; }
.gebruiker { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; }
.view { flex:1; min-height:0; }

/* Startscherm */
.home { overflow-y:auto; padding:40px 16px; max-width:900px; margin:0 auto; width:100%; }
.home h1 { margin:0 0 4px; font-size:1.6rem; }
.tegels { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; margin-top:20px; }
.tegel { display:block; text-align:left; background:var(--vlak); color:var(--fg); border:1px solid var(--rand); border-radius:12px;
         padding:20px; font-weight:400; text-decoration:none; position:relative; overflow:hidden; }
.tegel::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accent); }
.tegel:hover { border-color:var(--fg); }
.tegel strong { display:block; font-size:1.1rem; margin-bottom:4px; }
.tegel span { color:var(--muted); font-size:.92rem; }

/* Analysetool */
.werkvlak { display:flex; }
.zijbalk { width:260px; flex-shrink:0; padding:16px; border-right:1px solid var(--rand); overflow-y:auto; background:var(--vlak); }
.zijtitel { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:20px 0 8px; }
.gesprekken { list-style:none; margin:0; padding:0; }
.gesprekken button { width:100%; text-align:left; background:none; border:none; color:var(--fg); font-weight:400;
                     padding:8px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gesprekken button:hover, .gesprekken button.actief { background:var(--zacht); }

.chat { flex:1; display:flex; flex-direction:column; min-width:0; }
.berichten { flex:1; overflow-y:auto; padding:24px 16px; display:flex; flex-direction:column; gap:16px; }
.berichten > * { width:100%; max-width:860px; margin:0 auto; }
.welkom { text-align:center; margin-top:6vh; }
.welkom-rad { display:block; margin:0 auto 8px; }
.welkom h2 { margin:0 0 8px; }
.suggesties { display:flex; flex-direction:column; gap:8px; margin:16px auto; max-width:480px; }
.suggestie { background:var(--vlak); color:var(--fg); border-color:var(--rand); font-weight:400; text-align:left; }
.suggestie:hover { border-color:var(--accent); }

.bericht { display:flex; flex-direction:column; }
.bericht.vraag { align-items:flex-end; }
.bericht.vraag .ballon { background:var(--accent-zacht); color:var(--fg); border-radius:14px 14px 4px 14px;
                         padding:10px 14px; max-width:85%; white-space:pre-wrap; overflow-wrap:anywhere; }
.bericht.antwoord .ballon { background:var(--vlak); border:1px solid var(--rand); border-radius:14px 14px 14px 4px;
                            padding:12px 16px; overflow-x:auto; }
.bericht.antwoord.fout .ballon { border-color:var(--fout); }
.ballon p { margin:0 0 10px; } .ballon p:last-child { margin-bottom:0; }
.ballon ul, .ballon ol { margin:0 0 10px; padding-left:22px; }
.ballon h3, .ballon h4 { margin:12px 0 6px; font-size:1rem; }
.ballon table { border-collapse:collapse; margin:4px 0 10px; font-size:.92rem; font-variant-numeric:tabular-nums; }
.ballon th, .ballon td { border-bottom:1px solid var(--rand); padding:5px 10px; text-align:left; white-space:nowrap; }
.ballon th { color:var(--muted); font-weight:600; }
.ballon td.getal, .ballon th.getal { text-align:right; }
.ballon code { background:var(--zacht); padding:1px 4px; border-radius:4px; }
.bezig { color:var(--muted); display:flex; align-items:center; }

.grafiek { margin:12px 0 4px; padding-top:12px; border-top:1px solid var(--rand); }
.grafiek h4 { margin:0 0 8px; font-size:.95rem; }
.grafiek-vak { position:relative; height:300px; }
.grafiek-vak.hoog { height:420px; }

.acties { display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.acties .bedankt { color:var(--muted); font-size:.85rem; }
.acties textarea { flex:1 1 240px; min-height:2.4em; font:inherit; font-size:.9rem; padding:6px 8px;
                   border:1px solid var(--rand); border-radius:6px; background:var(--vlak); color:var(--fg); }
.acties .scheiding { flex:1; }
.keuze { display:inline-flex; gap:6px; align-items:center; font-size:.85rem; color:var(--muted); }

.vraagbalk { display:flex; gap:8px; padding:12px 16px 16px; border-top:1px solid var(--rand); background:var(--vlak); }
.vraagbalk textarea { flex:1; resize:none; font:inherit; padding:10px 12px; border:1px solid var(--rand); border-radius:8px;
                      background:var(--bg); color:var(--fg); max-height:30vh; }

/* Beheer */
.beheer { overflow-y:auto; padding:20px 16px 40px; max-width:1100px; margin:0 auto; width:100%; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--rand); margin-bottom:16px; }
.tab { background:none; border:none; border-bottom:3px solid transparent; border-radius:0; color:var(--muted); padding:10px 14px; }
.tab.actief { color:var(--fg); border-bottom-color:var(--accent); }
.filterbalk { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:12px; font-size:.92rem; }
.beheer-vragen { display:flex; flex-direction:column; gap:12px; }
.bv { background:var(--vlak); border:1px solid var(--rand); border-radius:10px; padding:12px 16px; }
.bv.fout { border-color:var(--fout); }
.bv-kop { display:flex; gap:12px; flex-wrap:wrap; font-size:.85rem; color:var(--muted); margin-bottom:6px; }
.bv-vraag { font-weight:600; margin-bottom:6px; }
.bv details summary { cursor:pointer; color:var(--link); font-size:.9rem; }
.bv .ballon { border:none; padding:8px 0 0; }
.bv-oordeel { font-size:.85rem; font-weight:600; }
.bv-oordeel.goed { color:#2f7d4f; } .bv-oordeel.slecht { color:var(--fout); }
.tabelvak { overflow-x:auto; }
.gebruikers-tabel { border-collapse:collapse; width:100%; font-size:.92rem; background:var(--vlak); }
.gebruikers-tabel th, .gebruikers-tabel td { border-bottom:1px solid var(--rand); padding:8px 10px; text-align:left; white-space:nowrap; }
.gebruikers-tabel th { color:var(--muted); font-weight:600; }
.gebruikers-tabel td.midden, .gebruikers-tabel th.midden { text-align:center; }
.gebruikers-tabel select { font:inherit; padding:4px; border-radius:6px; border:1px solid var(--rand); background:var(--vlak); color:var(--fg); }

.mobiel { display:none; }
@media (max-width: 760px) {
  .zijbalk { display:none; }
  .mobiel { display:inline-block; }
  .kop .gebruiker #naam { display:none; }
  .merk img { height:26px; }
  .berichten { padding:16px; }
  .grafiek-vak { height:240px; }
}

/* PDF via afdrukken: enkel het gekozen antwoord */
@media print {
  body { background:#fff; color:#000; }
  .kop, .zijbalk, .vraagbalk, .acties, #welkom, .tabs, .filterbalk { display:none !important; }
  body.print-een .bericht:not(.print-doel) { display:none !important; }
  .app, .view, .chat, .berichten { height:auto; overflow:visible; display:block; }
  .berichten > * { max-width:none; }
  .ballon { border:none !important; }
  .print-kop { display:block !important; margin-bottom:12px; }
}
.print-kop { display:none; }
.print-logo { height:36px; width:auto; }
.export-doek { position:fixed; left:-10000px; top:0; }

/* Standaardwinkel */
.winkelbalk { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 16px; border-top:1px solid var(--rand);
              background:var(--vlak); font-size:.85rem; color:var(--muted); }
.winkel-keuze { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.winkelbalk select { font:inherit; padding:3px 6px; border:1px solid var(--rand); border-radius:6px; background:var(--bg); color:var(--fg); }
.winkel-standaard { display:inline-flex; align-items:center; gap:4px; }
.winkel-label { display:inline-flex; align-items:center; gap:6px; }
.winkel-label::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.welkom-winkel { display:inline-block; margin:12px 0 0; padding:3px 12px; border-radius:999px; background:var(--accent-zacht); font-size:.85rem; color:var(--fg); }

/* Aanpak: apart en klein onder het antwoord */
.aanpak { margin:4px 0 0 2px; font-size:.8rem; color:var(--muted); max-width:min(760px, 100%); }
.aanpak summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:4px; }
.aanpak summary::-webkit-details-marker { display:none; }
.aanpak summary::before { content:"\25B8"; font-size:.7rem; }
.aanpak[open] summary::before { content:"\25BE"; }
.aanpak-inhoud { margin-top:4px; padding-left:10px; border-left:2px solid var(--rand); }
.aanpak-inhoud p { margin:0 0 4px; }
.aanpak-inhoud ul { margin:0; padding-left:16px; }

/* Beheer v5 */
.sectietitel { font-size:1rem; margin:24px 0 6px; }
.tabinhoud > .sectietitel:first-child { margin-top:4px; }
.subtabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.subtab { background:transparent; color:var(--muted); border:1px solid var(--rand); padding:5px 12px; font-size:.88rem; font-weight:500; border-radius:999px; }
.subtab.actief { background:var(--accent-zacht); color:var(--fg); border-color:var(--accent); }
.uitnodig { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; font-size:.9rem; }
.uitnodig label { display:flex; flex-direction:column; gap:4px; color:var(--muted); }
.uitnodig input[type=text], .uitnodig input[type=email], .uitnodig input[type=number], .filterbalk input[type=date], .filterbalk select, .gebruikers-tabel input[type=number] {
  font:inherit; padding:6px 8px; border:1px solid var(--rand); border-radius:6px; background:var(--vlak); color:var(--fg); }
.uitnodig input[type=number] { width:140px; }
.gebruikers-tabel input[type=number] { width:110px; padding:4px 6px; }
.u-tools { display:flex; gap:10px; align-items:center; padding-bottom:8px; }
.u-tools label { flex-direction:row; align-items:center; color:var(--fg); }
.uitnodig button { padding:7px 16px; }
#uitnodigingen { margin-top:10px; }
.gebruikers-tabel td.getal, .gebruikers-tabel th.getal { text-align:right; }
.gebruikers-tabel tfoot td { font-weight:600; border-bottom:none; }
.stat-tegels { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; margin-bottom:8px; }
.stat-tegel { background:var(--vlak); border:1px solid var(--rand); border-radius:10px; padding:10px 14px; }
.stat-tegel span { display:block; font-size:.8rem; color:var(--muted); }
.stat-tegel strong { font-size:1.35rem; font-variant-numeric:tabular-nums; }
#g-grafiek .grafiek { border-top:none; background:var(--vlak); border:1px solid var(--rand); border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.status-ok { color:#2f7d4f; } .status-open { color:var(--muted); }
.balk-meter { display:inline-block; width:70px; height:6px; border-radius:3px; background:var(--zacht); vertical-align:middle; margin-left:6px; overflow:hidden; }
.balk-meter i { display:block; height:100%; background:var(--accent); }
.balk-meter.vol i { background:var(--fout); }

/* Beheer: aanvragen */
.aanvraag-tools { display:inline-flex; gap:10px; }
.aanvraag-tools label { display:inline-flex; align-items:center; gap:4px; }
.aanvraag-acties { display:inline-flex; gap:6px; }
.aanvraag-acties button { padding:4px 12px; font-size:.85rem; }
.teller { display:inline-block; min-width:1.4em; padding:0 6px; margin-left:6px; border-radius:999px; background:var(--accent); color:#fff; font-size:.75rem; line-height:1.4em; text-align:center; font-weight:600; }

/* Gebeurtenissen (v7) */
.geb-form { margin:8px 0 12px; padding:12px; border:1px solid var(--rand); border-radius:8px; }
.geb-form select, .geb-form input[type=date] { padding:6px 8px; border:1px solid var(--rand); border-radius:6px; font:inherit; }
.geb-form .breed { flex:1 1 320px; }
.geb-form .breed input { width:100%; }
#e-zoek { padding:6px 8px; border:1px solid var(--rand); border-radius:6px; font:inherit; min-width:160px; }
#e-nieuw { margin-left:auto; padding:6px 14px; }
.geb-status { font-size:.82rem; padding:2px 8px; border-radius:999px; border:1px solid var(--rand); white-space:nowrap; }
.geb-onzeker { border-color:#e0a800; color:#8a6500; }
.geb-geannuleerd { color:var(--muted); }
tr.geannuleerd td { color:var(--muted); text-decoration:line-through; }
tr.geannuleerd td:last-child, tr.geannuleerd td:nth-child(5) { text-decoration:none; }
.nowrap { white-space:nowrap; }

/* Gebeurtenis melden (v8) */
.melden { max-width:900px; }
.melden .terug { margin:0 0 8px; }
.melden-intro { font-size:1.02rem; margin:4px 0 12px; }
.melden-uitleg { background:var(--vlak); border:1px solid var(--rand); border-left:4px solid var(--accent); border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:.93rem; }
.melden-uitleg p { margin:6px 0; }
.zij-melden { display:block; margin-top:16px; padding:8px 10px; border:1px dashed var(--rand); border-radius:8px; color:var(--fg); text-decoration:none; font-size:.9rem; text-align:center; }
.zij-melden:hover { border-color:var(--accent); }
.geb-voorgesteld { border-color:var(--accent); color:var(--fg); background:var(--accent-zacht); }
.geb-afgewezen { color:var(--muted); }
button.knop-accent { border-color:var(--accent); color:var(--fg); background:var(--accent-zacht); }
.subtab .teller { margin-left:6px; }

/* v9: tekst laten teruglopen, zoeken, dubbelcontrole */
.geb-tabel td.oms { white-space:normal; min-width:220px; width:100%; }
.geb-tabel td, .geb-tabel th { vertical-align:top; }
.zoekveld { padding:6px 8px; border:1px solid var(--rand); border-radius:6px; font:inherit; min-width:280px; flex:1 1 280px; }
#e-zoek { min-width:280px; }
.m-dubbel { flex-basis:100%; background:var(--accent-zacht); border:1px solid var(--accent); border-radius:8px; padding:8px 12px; font-size:.9rem; }
.m-dubbel ul { margin:4px 0 4px 18px; padding:0; }
@media (max-width: 700px) { .zoekveld, #e-zoek { min-width:0; width:100%; } }
.geb-tabel td.knoppen { width:1%; }
.geb-tabel td.knoppen > span { display:flex; flex-direction:column; gap:4px; align-items:stretch; }