/* Geef Inzicht Expert-dashboard.
   Huisstijl-tokens overgenomen uit het theme (resources/styles/app.css). */

/* Fase 21: label dat alleen voor schermlezers is, niet zichtbaar in beeld. */
.gid-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  --brand-turq: #53C4C8;
  --primary: #53C4C8;
  --primary-hover: #3FB4B8;
  --primary-ink: #112524;
  --action: #1F6E6B;
  --action-hover: #185754;
  --pink-cta: #C72E73;
  --ink: #16302F;
  --body: #36514F;
  --muted: #6B807E;
  --line: #E2EAE9;
  --line-strong: #CDDAD8;
  --surface: #FFFFFF;
  --bg: #F7FAF9;
  --r-pill: 999px;
  --shadow: 0 4px 18px rgba(18, 56, 54, .07);
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.gi-dash {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.25; }
h1 { font-size: 1.7rem; margin: 0 0 .5rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
a { color: var(--action); }
a:hover { color: var(--action-hover); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Kop en voet */
.gid-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.gid-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.gid-logo img { width: 40px; height: auto; }
.gid-logo span { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.gid-footer { padding: 24px 20px 40px; text-align: center; color: var(--muted); font-size: .95rem; }

/* Hoofdvlak */
.gid-main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 28px 16px 40px; }
.gid-breed { width: 100%; }
.gid-kaart {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 28px 24px; margin: 0 auto;
}
.gid-kaart--smal { max-width: 460px; margin-top: 4vh; }
.gid-intro { color: var(--body); margin-top: 0; }
.gid-subkop { margin-top: 2rem; }
.gid-terug { margin: 0 0 1rem; font-size: .95rem; }
.gid-nalink { margin-top: 1.25rem; }

/* Meldingen: kleur plus icoon plus tekst, nooit alleen kleur */
.gid-melding {
  border-radius: 12px; padding: 14px 16px; margin: 0 0 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 1rem; border: 2px solid;
}
.gid-melding--ok { background: #EDF8F0; border-color: #2E7D46; color: #1D5130; }
.gid-melding--ok::before { content: "\2713"; font-weight: 700; font-size: 1.1rem; }
.gid-melding--fout { background: #FDF0F0; border-color: #B3372F; color: #7C2620; }
.gid-melding--fout::before { content: "!"; font-weight: 700; font-size: 1.1rem;
  border: 2px solid currentColor; border-radius: 50%; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* Fase 14: rustige regel voor het gedeelde teamaccount (geen alarm, wel duidelijk). */
.gid-gedeeld { background: #F4F8F8; border: 1px solid #D5E4E4; color: var(--muted);
  font-size: .95rem; }
.gid-gedeeld::before { content: "\2139"; font-weight: 700; font-size: 1rem; color: var(--brand-turq);
  border: 2px solid currentColor; border-radius: 50%; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Actiekaarten (startscherm en profieloverzicht) */
.gid-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 1rem; }
.gid-kaarten--lijst { grid-template-columns: 1fr; max-width: 560px; }
.gid-actiekaart {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 22px 20px; text-decoration: none; color: var(--body);
  transition: border-color .15s ease, transform .15s ease;
}
a.gid-actiekaart:hover { border-color: var(--brand-turq); transform: translateY(-2px); }
.gid-actiekaart__icoon { font-size: 1.6rem; }
.gid-actiekaart__titel { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.gid-actiekaart__uitleg { font-size: .95rem; color: var(--muted); }
.gid-actiekaart--binnenkort { opacity: .55; cursor: default; }

/* Formulieren */
.gid-veld { margin: 0 0 1.1rem; }
.gid-veld label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.gid-veld--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--body); }
.gid-veld input[type="text"],
.gid-veld input[type="search"],
.gid-veld input[type="password"],
.gid-veld textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); min-height: 48px;
}
.gid-veld textarea { min-height: 170px; resize: vertical; }
.gid-veld input:focus-visible, .gid-veld textarea:focus-visible,
.btn:focus-visible, .gid-verwijder:focus-visible {
  outline: 3px solid var(--brand-turq); outline-offset: 2px;
}
.gid-hint { display: block; font-size: .92rem; color: var(--muted); margin-top: 6px; }
.gid-verplicht { font-weight: 400; color: var(--muted); font-size: .9rem; }
.gid-optioneel { font-weight: 400; color: var(--muted); font-size: .9rem; }
.gid-bestand { margin-top: 8px; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--action); flex: none; }

/* Knoppen (overgenomen uit de site-huisstijl) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 24px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease;
}
.btn--primary { background: var(--primary); color: var(--primary-ink); }
.btn--primary:hover { background: var(--primary-hover); color: var(--primary-ink); }
.btn--secondary { background: var(--surface); color: var(--action); border-color: var(--action); }
.btn--secondary:hover { background: var(--action); color: #fff; }
.btn--ghost { background: transparent; color: var(--action); }
.btn--ghost:hover { background: #EFF8F8; color: var(--action-hover); }
.btn--lg { min-height: 56px; font-size: 1.05rem; }
.btn--sm { min-height: 40px; padding: 6px 16px; font-size: .95rem; }
.btn--block { width: 100%; }

/* Foto-scherm */
.gid-fotorij { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.gid-foto { margin: 0; }
.gid-foto img { width: 220px; height: 220px; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); }
.gid-foto__leeg {
  width: 220px; height: 220px; border-radius: 16px; border: 2px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.gid-foto figcaption { text-align: center; color: var(--muted); font-size: .92rem; margin-top: 8px; }

/* Voorbeeldweergave (intro) */
.gid-voorbeeld { margin: 1.5rem 0; }
.gid-voorbeeld__label { display: block; font-size: .92rem; color: var(--muted); margin-bottom: 8px; }
.gid-voorbeeld__kaart {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
}
.gid-voorbeeld__kaart img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; flex: none; }
.gid-voorbeeld__kaart strong { font-family: var(--font-head); color: var(--ink); }
.gid-voorbeeld__kaart p { margin: 4px 0 0; font-size: .95rem; }

/* Herhaalbare rijen (tarieven, expertises) */
.gid-rij {
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 8px;
  margin: 0 0 14px; position: relative; background: var(--surface);
}
.gid-rij--klein { display: flex; gap: 10px; align-items: center; padding: 10px 12px; }
.gid-rij--klein input { flex: 1; }
.gid-verwijder {
  background: none; border: none; color: #B3372F; font: inherit; font-size: .92rem;
  cursor: pointer; text-decoration: underline; padding: 6px 4px;
}
.gid-rij--klein .gid-verwijder { flex: none; }

/* Klachten */
.gid-blok { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 14px; background: var(--surface); }
.gid-blok summary { cursor: pointer; padding: 14px 16px; list-style-position: inside; }
.gid-blok summary h2 { display: inline; margin: 0; font-size: 1.1rem; }
.gid-blok summary .gid-hint { margin-left: 26px; }
.gid-blok > *:not(summary) { margin-left: 16px; margin-right: 16px; }
.gid-blok > p:last-of-type, .gid-blok .gid-vinkjes { margin-bottom: 14px; }
.gid-vinkjes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 12px; max-height: 340px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
}
.gid-vinkje { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; }
.gid-vinkje:hover { background: var(--bg); }
.gid-zoekklein { max-width: 320px; }

/* Mobiel */
@media (max-width: 600px) {
  .gid-main { padding: 18px 12px 32px; }
  .gid-kaart { padding: 20px 16px; }
  h1 { font-size: 1.45rem; }
  .gid-fotorij { gap: 18px; }
  .gid-foto img, .gid-foto__leeg { width: 160px; height: 160px; }
  .gid-rij--klein { flex-wrap: wrap; }
}

/* Agenda-instellingen (fase 2) */
.gid-dagrij {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px;
}
.gid-dagrij__naam { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); min-width: 130px; }
.gid-dagrij__vakken { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); }
.gid-dagrij__vak { display: inline-flex; align-items: center; gap: 6px; }
.gid-dagrij select, .gid-regel-form select {
  font: inherit; color: var(--ink); padding: 8px 10px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
}
.gid-voorkeuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 20px; }
.gid-voorkeuren select { width: 100%; font: inherit; color: var(--ink); padding: 10px 12px; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.gid-regel-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: .5rem 0 1rem; }
.gid-regel-form label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.gid-regel-form input[type="date"] { font: inherit; padding: 8px 10px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; }
.gid-lijstje { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.gid-lijstje li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin-bottom: 8px;
}
.gid-lijstje form { margin: 0; }
.gid-voorbeeldslots { display: flex; flex-wrap: wrap; gap: 8px; margin: .5rem 0; }
.gid-slotchip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px;
  background: #EFF8F8; border: 1px solid var(--brand-turq); border-radius: 999px;
  color: var(--ink); font-weight: 600; font-size: .95rem;
}

/* Afsprakenoverzicht (fase 2) */
.gid-afspraak {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
}
.gid-afspraak--stil { opacity: .7; }
.gid-afspraak__wanneer { min-width: 150px; display: flex; flex-direction: column; }
.gid-afspraak__wanneer strong { color: var(--ink); text-transform: capitalize; }
.gid-afspraak__wie { flex: 1; display: flex; flex-direction: column; min-width: 200px; }
.gid-afspraak__wie strong { color: var(--ink); }
.gid-afspraak__wie em { color: var(--muted); font-size: .95rem; }
.gid-afspraak__acties { display: flex; gap: 8px; }

/* Berichten (fase 3) */
.gid-gesprekken { display: flex; flex-direction: column; gap: 10px; margin-top: 1rem; }
.gid-gespreksregel {
  display: grid; grid-template-columns: 160px 1fr auto; gap: 6px 16px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  text-decoration: none; color: var(--body); transition: border-color .15s ease;
}
.gid-gespreksregel:hover { border-color: var(--brand-turq); }
.gid-gespreksregel--ongelezen { border-left: 5px solid var(--primary); background: #FBFEFE; }
.gid-gespreksregel__wie { display: flex; align-items: center; gap: 8px; }
.gid-gespreksregel__wie strong { color: var(--ink); }
.gid-nieuwtje {
  display: inline-flex; align-items: center; background: var(--primary); color: var(--primary-ink);
  border-radius: 999px; font-size: .8rem; font-weight: 700; padding: 2px 10px;
}
.gid-gespreksregel__laatste { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gid-gespreksregel__wanneer { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.gid-gesprek .giw-ballon--ik { background: #EFF8F8; border-color: var(--brand-turq); }
@media (max-width: 620px) {
  .gid-gespreksregel { grid-template-columns: 1fr auto; }
  .gid-gespreksregel__laatste { grid-column: 1 / -1; }
}

/* Facturen (fase 4) */
.gid-sleepvlak {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 2px dashed var(--line-strong); border-radius: 16px;
  padding: 26px 18px; text-align: center; background: var(--bg);
  transition: border-color .15s ease, background .15s ease;
}
.gid-sleepvlak--actief { border-color: var(--primary); background: #EFF8F8; }
.gid-uploadvelden { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-end; margin-top: 1rem; }
.gid-uploadvelden .gid-veld { flex: 1; min-width: 220px; }
.gid-uploadvelden input[type="date"] { width: 100%; font: inherit; padding: 12px 14px; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 12px; }
.gid-uploadvelden .btn { margin-bottom: 1.1rem; }
.gid-filter { margin-top: 1.75rem; }
.gid-filter input[type="search"] { font: inherit; padding: 8px 12px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; }
.gid-facturen { display: flex; flex-direction: column; gap: 10px; margin-top: 1rem; }
.gid-factuur {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.gid-factuur__info { display: flex; flex-direction: column; }
.gid-factuur__info strong { color: var(--ink); }
.gid-factuur__info span { color: var(--muted); font-size: .92rem; }
.gid-factuur__acties { display: flex; gap: 8px; }

/* Beheeroverzicht (fase 5) */
.gid-tellers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 1rem 0; }
.gid-teller {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column;
}
.gid-teller strong { font-family: var(--font-head); font-size: 1.7rem; color: var(--ink); line-height: 1.2; }
.gid-teller span { color: var(--muted); font-size: .9rem; }
.gid-teller--accent { border-color: var(--primary); background: #EFF8F8; }

/* Mijn administratie (fase 6) */
.gid-terug--vast { max-width: 860px; margin: 0 auto 12px; padding: 0 2px; }
.gid-tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--line); margin: 0 0 1.25rem; flex-wrap: wrap; }
.gid-tab {
  padding: 10px 18px; border-radius: 12px 12px 0 0; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; color: var(--action); min-height: 44px;
  display: inline-flex; align-items: center;
}
.gid-tab--actief { background: #EFF8F8; color: var(--ink); border: 2px solid var(--line); border-bottom: 2px solid #EFF8F8; margin-bottom: -2px; }
.gid-status { font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; margin-left: 6px; vertical-align: middle; }
.gid-status--concept { background: var(--bg); color: var(--muted); border: 1px solid var(--line-strong); }
.gid-status--verstuurd { background: #FFF6E5; color: #8A5A00; border: 1px solid #E3B75E; }
.gid-status--betaald { background: #EDF8F0; color: #1D5130; border: 1px solid #2E7D46; }
.gid-status--vervallen { background: var(--bg); color: var(--muted); border: 1px solid var(--line); text-decoration: line-through; }
.gid-mailform { flex-basis: 100%; border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; }
.gid-maandlijst { display: flex; flex-direction: column; gap: 6px; }
.gid-maandregel {
  display: grid; grid-template-columns: 130px 1fr 1fr; gap: 8px 16px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
}
.gid-maandregel span:first-child { font-weight: 600; color: var(--ink); }
.gid-statuslog { flex-basis: 100%; font-size: .9rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; }
.gid-statuslog__meer summary { cursor: pointer; color: var(--action); font-size: .88rem; margin-top: 4px; }
.gid-statuslog__meer ul { margin: 6px 0 0 18px; padding: 0; }
@media (max-width: 560px) { .gid-maandregel { grid-template-columns: 1fr; gap: 2px; } }

/* Beheer: notificatie-adres (fase 7) */
.gid-regel-form input[type="email"] { font: inherit; padding: 8px 12px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; min-width: 260px; }

/* Beheeroverzicht fase 8 */
.gid-icoon { width: 26px; height: 26px; color: var(--action); flex: none; }
.gid-teller .gid-icoon { margin-bottom: 6px; }
.gid-teller--alarm { border-color: #E3B75E; background: #FFF6E5; }
.gid-teller--alarm .gid-icoon, .gid-teller--alarm strong { color: #8A5A00; }
.gid-actiekaart__icoon--lijn { line-height: 1; }
.gid-actiekaart__icoon--lijn .gid-icoon { width: 34px; height: 34px; }

/* Afspraken- en omzetoverzicht (fase 26) */
.gid-cijferblok {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1rem 0 .25rem;
}
.gid-cijfer {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.gid-cijfer__icoon { line-height: 1; margin-bottom: 4px; }
.gid-cijfer__groot { font-family: var(--font-head); font-size: 1.7rem; color: var(--ink); line-height: 1.2; }
.gid-cijfer__label { color: var(--ink); font-weight: 600; font-size: .95rem; }
.gid-cijfer__sub { color: var(--muted); font-size: .9rem; }
.gid-cijfer__diff { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.gid-cijfer__pijl { font-size: .75rem; }
.gid-cijfer__diff--op { color: #1D5130; }
.gid-cijfer__diff--neer { color: #8A2B2B; }
.gid-cijfer__diff--gelijk, .gid-cijfer__diff--geen { color: var(--muted); }
.gid-cijferblok__uitleg { color: var(--muted); font-size: .88rem; margin: 0 0 1.25rem; }

.gid-omzetfilters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; margin: 0 0 1rem;
}
.gid-omzetfilters label { display: flex; flex-direction: column; font-weight: 600; color: var(--ink); font-size: .92rem; gap: 4px; }
.gid-omzetfilters select { font: inherit; color: var(--ink); padding: 8px 10px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.gid-omzetfilters label.gid-omzetfilters__vink { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.gid-omzetfilters label.gid-omzetfilters__vink input { min-height: 20px; min-width: 20px; flex: none; }
.gid-omzetfilters__knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }

.gid-omzettotalen {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 1rem 0 0;
  background: #EFF8F8; border: 1px solid var(--primary); border-radius: 14px; padding: 14px 18px;
  color: var(--ink);
}
.gid-omzettotalen strong { font-family: var(--font-head); }

@media (max-width: 720px) {
  .gid-cijferblok { grid-template-columns: 1fr; }
  .gid-omzetfilters { flex-direction: column; align-items: stretch; }
  .gid-omzetfilters label { width: 100%; }
  .gid-omzetfilters select { width: 100%; }
  .gid-omzetfilters__knoppen { margin-left: 0; }
}
.gid-filterknoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 1rem 0 1.25rem; }
.gid-filterknop {
  display: inline-flex; align-items: center; min-height: 42px; padding: 6px 18px;
  border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--action);
  background: var(--surface);
}
.gid-filterknop:hover { border-color: var(--primary); background: #EFF8F8; }
.gid-filterknop--actief { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.gid-minifoto { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.gid-eerstelabel {
  display: inline-flex; align-items: center; gap: 6px;
  background: #EFF8F8; border: 1px solid var(--primary); color: var(--ink);
  border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .85rem;
}
.gid-eerstelabel .gid-icoon { width: 16px; height: 16px; }
.gid-wachtlabel {
  display: inline-flex; align-items: center; gap: 5px;
  background: #FFF6E5; border: 1px solid #E3B75E; color: #8A5A00;
  border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: .82rem;
}
.gid-wachtlabel .gid-icoon { width: 14px; height: 14px; color: #8A5A00; }
.gid-meekijk { background: #EFF8F8; border: 2px solid var(--brand-turq); color: var(--ink); }
.gid-status--a-gepland { background: #EDF8F0; color: #1D5130; border: 1px solid #2E7D46; }
.gid-status--a-verzet { background: #FFF6E5; color: #8A5A00; border: 1px solid #E3B75E; }
.gid-status--a-geweest { background: #E8F1FB; color: #1D4E89; border: 1px solid #6B9BD1; }
.gid-status--a-geannuleerd { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.gid-status[class*="--a-"] { font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; margin-left: 6px; }

/* Fase 9: nieuwe profielvelden en hulp-chat. */
.gid-rij--los { display: flex; gap: 10px; align-items: flex-end; }
.gid-rij--los .gid-veld { flex: 1; margin: 0; }
.gid-rij--los .gid-verwijder { flex: none; margin-bottom: 6px; }
.gid-vinkjes--verenigingen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.gid-vereniging { align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.gid-vereniging__logo { width: 56px; height: 44px; object-fit: contain; flex: none; background: #fff; border-radius: 6px; }
.gid-vereniging__logo--leeg { display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--bg); }
.gid-vereniging__naam { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.gid-vereniging__naam small { color: var(--muted); font-size: .8rem; }
.gid-avatar { width: 28px; height: 29px; flex: none; }
.gid-supportlabel { font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: #EFF8F8; color: #1F6E6B; border: 1px solid #53C4C8; }

/* Fase 10: Google Agenda-koppeling. */
.gid-googleblok { padding: 16px; margin-bottom: 1.5rem; }
.gid-googleblok .gid-vinkjes { margin: 6px 0 10px; }
.gid-google-status { font-weight: 600; color: var(--ink); margin: 0 0 6px; }

/* Fase 11: account (oogje bij wachtwoordvelden). */
.gid-oogveld { position: relative; display: block; }
.gid-oogveld input { width: 100%; padding-right: 44px; }
.gid-oog { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 1.1rem; opacity: .55; padding: 6px; }
.gid-oog:hover, .gid-oog--open { opacity: 1; }

/* Fase 12: fototips-knop en het venster in de pagina (onderdeel B). */
.gid-tipregel { margin: 6px 0 0; }
.gid-tiplink {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--action); font: inherit; text-decoration: underline;
}
.gid-tiplink:hover, .gid-tiplink:focus-visible { color: var(--ink); }

.gid-modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0; border: 0; border-radius: 16px;
  color: var(--body); background: var(--surface);
  box-shadow: 0 12px 44px rgba(16, 37, 36, .24);
}
.gid-modal::backdrop { background: rgba(16, 37, 36, .45); }
.gid-modal__kop {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 20px 22px 4px;
}
.gid-modal__titel { margin: 0; font-size: 1.2rem; color: var(--ink); }
.gid-modal__sluit {
  flex: none; background: none; border: 0; cursor: pointer;
  font-size: 1.9rem; line-height: 1; color: var(--muted); padding: 0 4px;
}
.gid-modal__sluit:hover, .gid-modal__sluit:focus-visible { color: var(--ink); }
.gid-modal__inhoud { padding: 4px 22px; overflow-y: auto; }
.gid-modal__inhoud p { margin: 8px 0; }
.gid-modal__inhoud ul { margin: 8px 0 0; padding-left: 20px; }
.gid-modal__inhoud li { margin-bottom: 10px; }
.gid-modal__voet { padding: 12px 22px 20px; text-align: right; }

/* Fase 12: afspraaktypes. */
.gid-typelabel { margin: 0 0 10px; font-size: .9rem; color: var(--action); font-weight: 600; }
.gid-afspraak__soort { display: block; font-size: .85rem; color: var(--muted); margin-top: 2px; }

/* Fase 13: keuzemenu's overal dezelfde eigen stijl (o.a. Duur bij afspraaktypes). */
.gid-veld select, .gid-select {
  width: 100%; font: inherit; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); min-height: 48px;
}
.gid-veld select:focus-visible, .gid-select:focus-visible {
  outline: 3px solid var(--brand-turq); outline-offset: 2px;
}

/* Fase 13: prijskeuze per afspraaktype (gratis-vinkje + euro-veld). */
.gid-prijsveld { display: block; margin-top: 10px; }
.gid-prijsveld[hidden] { display: none; }
.gid-prijslabel { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.gid-euro { display: inline-flex; align-items: stretch; max-width: 220px; }
.gid-euro__teken {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-right: 0; border-radius: 12px 0 0 12px;
  background: var(--bg); color: var(--muted); font-weight: 600;
}
.gid-euro input {
  font: inherit; color: var(--ink); padding: 12px 14px; min-height: 48px; width: 140px;
  border: 1px solid var(--line-strong); border-radius: 0 12px 12px 0; background: var(--surface);
}

/* Fase 13 (onderdeel 1): "Afspraak vastleggen" als open, uitnodigende kaart. */
.gid-vastleg {
  background: #EFF8F8; border: 0; border-radius: 16px; padding: 18px 20px;
}
.gid-vastleg__kop { margin: 0 0 8px; font-size: 1.2rem; color: var(--ink); }
.gid-vastleg__lijst { margin: 8px 0 16px; padding-left: 20px; }
.gid-vastleg__lijst li { margin-bottom: 6px; }
/* De knop die de velden opent (een <summary> met knop-stijl, zonder driehoekje). */
.gid-vastleg__uitklap > summary {
  display: inline-flex; list-style: none; cursor: pointer;
}
.gid-vastleg__uitklap > summary::-webkit-details-marker { display: none; }
.gid-vastleg__uitklap > summary::marker { content: ''; }
.gid-vastleg__form { margin-top: 16px; }
.gid-vastleg__voor { margin: 0 0 10px; color: var(--body); }
.gid-vastleg__rij { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 14px; }
.gid-vastleg__rij label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--ink); }
.gid-vastleg__rij input, .gid-vastleg__rij select {
  font: inherit; color: var(--ink); padding: 10px 12px; min-height: 46px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
}
/* Rustige variant: er staat al een afspraak. */
.gid-vastleg--staat { display: flex; flex-direction: column; gap: 6px; }
.gid-vastleg__regel { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--body); }
.gid-vastleg__vink {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--action); color: #fff; font-size: .8rem;
}
.gid-vastleg__acties { margin: 0; display: flex; gap: 16px; }

/* Fase 18: zelf een afspraak inplannen. */
.gid-inplan-knop { margin: 0 0 1.5rem; }
.gid-stap { margin-bottom: 1rem; }
.gid-stap-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.gid-keuzeblok { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; margin: .4rem 0;
  border: 1px solid #DCE7E6; border-radius: 10px; cursor: pointer; }
.gid-keuzeblok input { width: 20px; height: 20px; flex: 0 0 auto; }
.gid-contactlijst { width: 100%; border: 1px solid #DCE7E6; border-radius: 10px; padding: .3rem; margin-top: .4rem; }
.gid-contactlijst option { padding: .5rem .6rem; border-radius: 6px; }
.gid-waarschuwing { background: #FFF6E7; border: 1px solid #F0C879; border-radius: 10px;
  padding: .9rem 1.1rem; margin: 1rem 0; }
/* Compacte variant voor in een tabelcel. De volle maat is bedoeld voor een
   waarschuwing boven een formulier; acht daarvan onder elkaar in een rij
   accounts overstemt de tabel waar ze bij horen. */
.gid-waarschuwing--compact { padding: .45rem .7rem; margin: .5rem 0 0; border-radius: 8px; }
.gid-overzicht { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: .5rem 0 1rem;
  background: #F7FAF9; border-radius: 10px; padding: 1rem 1.2rem; }
.gid-overzicht dt { font-weight: bold; color: #3A4A48; }
.gid-overzicht dd { margin: 0; }
.gid-afspraak__prijs { display: inline-block; font-weight: bold; color: #2C6E6B; }
/* Ruime tikvlakken op de telefoon (doelgroep). */
@media (max-width: 640px) {
  .gid-stap-nav .btn { flex: 1 1 auto; min-height: 44px; }
  .gid-keuzeblok { min-height: 44px; }
}

/* Fase 23: overzichten Berichten en Mijn afspraken opgeschoond. */
.gid-dagkop {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  color: #1F6E6B;
}
.gid-afspraakstatus {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #36514F;
  background: #EFF8F8;
  border-radius: 999px;
  padding: 2px 10px;
}
.gid-afspraak--stil .gid-afspraakstatus {
  background: #F0F2F1;
  color: #6B807E;
}
/* Eén knop die de mogelijkheden opent, in plaats van een rij losse knopjes. */
.gid-acties {
  display: inline-block;
}
.gid-acties > summary {
  list-style: none;
  cursor: pointer;
}
.gid-acties > summary::-webkit-details-marker {
  display: none;
}
.gid-acties__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.gid-acties__menu a {
  display: block;
  padding: 10px 12px;
  min-height: 44px;
  box-sizing: border-box;
  background: #F7FAF9;
  border-radius: 8px;
  color: #1F6E6B;
  text-decoration: none;
}
.gid-acties__menu a:hover {
  background: #EFF8F8;
}

/* Fase 23: berichtenregels dragen meer info (wachtlabel, afspraak-vermelding).
   Eigen modifier zodat het beheeroverzicht en de hulpzoekerslijst ongemoeid blijven.
   Naam met labels bovenaan (mag afbreken), datum rechts, voorbeeldregel eronder. */
.gid-gespreksregel--rijk {
  grid-template-columns: 1fr auto;
  align-items: start;
}
.gid-gespreksregel--rijk .gid-gespreksregel__wie {
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}
.gid-gespreksregel--rijk .gid-gespreksregel__laatste {
  grid-column: 1 / -1;
  white-space: normal;
}

/* ==================================================================
   Fase 24
   ================================================================== */

/* Onderdeel 2: het startraster. Negen kaarten, drie per rij op laptop, twee op
   tablet, één op de telefoon. Vaste kolommen, zodat een laatste rij met minder
   kaarten niet uitrekt. Gelijke hoogte per rij komt van de grid (stretch). */
.gid-startraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 1rem; }
@media (max-width: 900px) { .gid-startraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gid-startraster { grid-template-columns: 1fr; } }
.gid-startraster .gid-actiekaart { height: 100%; gap: 8px; }
/* Icoon en titel bovenaan, uitleg begint in elke kaart op dezelfde hoogte
   (twee regels ruimte voor de titel), een extra regel staat onderaan. */
.gid-startraster .gid-actiekaart__icoon--lijn { color: var(--brand-turq); }
.gid-startraster .gid-actiekaart__titel { min-height: 2.5em; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.gid-startraster .gid-actiekaart__uitleg { margin: 0; }
.gid-actiekaart__extra { margin-top: auto; padding-top: 10px; color: var(--brand-turq); font-weight: 600; font-size: .92rem; }

/* Onderdeel 4: het hulp-blok met twee onderwerpen. */
.gid-hulpblok { border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin: 0 0 16px; background: var(--surface); }
.gid-hulpblok__titel { font-size: 1.15rem; margin: 0 0 10px; }
.gid-hulpblok__voorbeelden { margin: 0 0 14px; padding-left: 20px; color: var(--body); }
.gid-hulpblok__voorbeelden li { margin: 4px 0; }
.gid-hulpform > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; }
.gid-hulpform > summary::-webkit-details-marker { display: none; }
.gid-hulpform[open] > summary { display: none; }
.gid-hulpform > form { margin-top: 8px; }
.gid-hulpmail { color: var(--muted); font-size: .95rem; margin: 4px 0 0; }
.gid-onderwerp { margin: 0 0 12px; }

/* Onderdeel 5: het persoonlijke hoekje rechtsboven (avatar + voornaam + menu). */
.gid-gebruiker { position: relative; }
.gid-gebruiker__knop {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
}
.gid-gebruiker__knop::-webkit-details-marker { display: none; }
.gid-gebruiker__knop:hover { border-color: var(--brand-turq); }
.gid-gebruiker__knop:focus-visible { outline: 3px solid var(--brand-turq); outline-offset: 2px; }
.gid-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; justify-content: center; background: #EFF8F8;
}
.gid-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gid-avatar--initialen { color: #1F6E6B; font-family: var(--font-head); font-weight: 700; font-size: .95rem; }
.gid-gebruiker__naam { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.gid-gebruiker__chevron { width: 18px; height: 18px; color: var(--muted); transition: transform .15s ease; }
.gid-gebruiker[open] .gid-gebruiker__chevron { transform: rotate(180deg); }
.gid-gebruiker__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 50;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column;
}
.gid-gebruiker__menu a {
  padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--body);
  min-height: 44px; display: flex; align-items: center;
}
.gid-gebruiker__menu a:hover { background: #F4F8F7; }
.gid-gebruiker__menu a:focus-visible { outline: 3px solid var(--brand-turq); outline-offset: -2px; }
/* Beheerschermen: de eigen naam van het teamlid, zonder uitklapmenu. Hier stond
   voorheen het hoekje van de expert, wat tijdens een meekijksessie de verkeerde
   persoon toonde. */
.gid-gebruiker--team { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 560px) {
  .gid-gebruiker__naam { display: none; }
  .gid-avatar { width: 34px; height: 34px; }
}

/* Automatiseringen (fase 27) */
.gid-auto { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 12px; }
.gid-auto__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gid-auto__kop strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); }
.gid-auto__stand { font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.gid-auto__stand--aan { background: #EDF8F0; color: #1D5130; border: 1px solid #2E7D46; }
.gid-auto__stand--uit { background: var(--bg); color: var(--muted); border: 1px solid var(--line-strong); }
.gid-auto__kritiek { font-size: .78rem; color: #8A5A00; background: #FFF6E5; border: 1px solid #E3B75E; border-radius: 999px; padding: 2px 10px; }
.gid-auto__uitleg { margin: 10px 0 4px; font-size: .95rem; color: var(--ink); line-height: 1.6; }
.gid-auto__acties { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }

/* ============================================================
   Fase 31: matchingscherm, wijzigingenlogboek en vaste gegevens
   ============================================================ */
.gid-omzetfilters input[type="month"], .gid-omzetfilters input[type="date"] { font: inherit; color: var(--ink); padding: 8px 10px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }

.gid-matchregel, .gid-logregel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 10px; }
.gid-matchregel summary, .gid-logregel summary { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; min-height: 44px; }
.gid-matchregel summary::-webkit-details-marker, .gid-logregel summary::-webkit-details-marker { display: none; }
.gid-matchregel[open] summary, .gid-logregel[open] summary { border-bottom: 1px solid var(--line); }
.gid-matchregel__maanden { display: flex; flex-direction: column; min-width: 140px; }
.gid-matchregel__maanden span { color: var(--muted); font-size: .88rem; }
.gid-matchregel__wie { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gid-matchregel__form { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.gid-matchregel__velden { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.gid-matchregel__velden label, .gid-matchregel__notitie { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--ink); font-size: .92rem; }
.gid-matchregel__velden input, .gid-matchregel__velden select, .gid-matchregel__notitie textarea { font: inherit; color: var(--ink); padding: 8px 10px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.gid-matchregel__notitie textarea { min-height: 60px; resize: vertical; }

.gid-logregel--tarief { border-color: #e5b34a; }
.gid-logregel__wanneer { min-width: 130px; }
.gid-logregel__wat { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gid-logregel__detail { padding: 12px 14px; }
.gid-logregel__detail p { margin: 0 0 8px; overflow-wrap: anywhere; }
.gid-status--tarief { background: #fdf3dd; color: #7a5a12; }

.gid-vastblok__lijst { margin: 0 0 12px; padding-left: 18px; }
.gid-vastblok__lijst li { margin-bottom: 6px; }
.gid-vastblok__waarde { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg, #f7faf9); }

/* Fase 31: het lichte opmaakveld op Mijn teksten. */
.gid-veld__label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.gid-editor { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); overflow: hidden; }
.gid-editor__balk { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--bg, #f7faf9); }
.gid-editor__balk button { font: inherit; font-size: .88rem; padding: 6px 10px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.gid-editor__balk button:hover { background: var(--line); }
.gid-editor__vlak { min-height: 260px; padding: 12px 14px; outline: none; overflow-wrap: anywhere; }
.gid-editor__vlak h3 { margin: 14px 0 6px; }
.gid-editor__vlak:focus { box-shadow: inset 0 0 0 2px var(--action, #53c4c8); }

/* Fase 32: chat-maskering, uitklapbaar gesprek op de contactkaart, gesprekken-sort. */
.giw-masker-note { font-size: .82rem; color: #6b807e; margin: 4px 0 0; }
.gid-gesprek-inzien { margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .6rem; }
.gid-gesprek-inzien > summary { cursor: pointer; font-weight: 600; color: var(--action, #1f6e6b); min-height: 40px; display: flex; align-items: center; }
.gid-inzien-body { padding-top: .5rem; }
.gid-inzien-bericht { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; background: var(--surface); }
.gid-inzien-bericht--expert { background: var(--bg, #f7faf9); }
.gid-inzien-wie { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 2px; }
.gid-inzien-bericht p { margin: 0; overflow-wrap: anywhere; }

/* Fase 34: interne notitie bij een afspraak. Het tekentje in de lijst en het
   ingeklapte veld eronder. Op smalle schermen (375px) mag er niets uitlopen,
   dus het tekentje breekt mee en het tekstvak blijft binnen zijn kolom. */
.gid-notitieteken {
  /* align-self: anders rekt het label in een flexkolom over de volle breedte
     (zelfde correctie als bij .gid-afspraakstatus in fase 23). */
  display: inline-flex; align-self: flex-start; align-items: center; gap: 4px;
  font-size: .78rem; line-height: 1.3; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  background: #f3f4f6; color: #4b5563;
}
.gid-notitie { margin-top: 10px; grid-column: 1 / -1; min-width: 0; }
.gid-notitie > summary {
  cursor: pointer; font-size: .82rem; color: #4b5563;
  padding: 4px 0; list-style: none;
}
.gid-notitie > summary::-webkit-details-marker { display: none; }
.gid-notitie > summary::before { content: "\270E"; margin-right: 6px; }
.gid-notitie > summary:hover { color: #111827; }
.gid-notitie form { margin-top: 6px; }
.gid-notitie textarea {
  width: 100%; max-width: 100%; box-sizing: border-box;
  min-height: 72px; resize: vertical;
  /* Zelfde opmaak als de andere velden in het dashboard (zie .gid-veld en
     .gid-matchregel__notitie); zonder font:inherit valt de browser terug op
     een monospace-standaard die uit de toon valt. */
  font: inherit; color: var(--ink); padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
}
.gid-notitie__herkomst { margin: 6px 0 8px; }

/* Fase 34b: twee soorten notitie bij een afspraak, met een eigen kleur zodat
   je in een lijst meteen ziet welke er staat.
     - .gid-notitieteken            "notitie bij de afspraak" (expert ziet mee)
     - .gid-notitieteken--intern    "interne notitie" (alleen het team)
   Bewust geen kleur alleen: er staat ook altijd woordelijk bij wat het is. */
.gid-notitieteken--intern { background: #fef3c7; color: #92400e; }
.gid-matchregel__notitie .gid-hint { display: block; font-weight: 400; margin: 2px 0 4px; }

/* Fase 35: opvolging bij stilte. Twee labels in de gesprekkenlijst, naast het
   bestaande oranje wachtlabel: nog geen afspraak (vraagt actie) en afgevinkt
   (klaar). Beide met woord, niet alleen kleur. */
.gid-opvolglabel {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-size: .78rem; line-height: 1.3; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: #ede9fe; color: #5b21b6;
}
.gid-afgevinkt {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 4px;
  font-size: .78rem; line-height: 1.3; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: #ecfdf5; color: #065f46;
}
.gid-opvolgblok { margin: 12px 0 16px; padding: 12px 16px; }
.gid-opvolgblok p { margin: 0 0 10px; }
.gid-opvolgblok form { margin: 0; }

/* Fase 36: het aandachtsblok bovenaan het beheeroverzicht. Een omkaderd blok
   met per regel een aantal, een zin en een pijl; de hele regel is de link,
   zodat het tikvlak ook op een telefoon ruim genoeg is (>=44px hoog). Regels
   met nul komen er niet in, dus wat je hier ziet is werk dat er ligt. */
.gid-aandacht {
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: 16px;
  padding: 18px 20px; margin: 0 0 1.5rem; box-shadow: var(--shadow);
}
.gid-aandacht__kop {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-family: var(--font-head); font-size: 1.05rem; color: var(--ink);
}
.gid-aandacht__kop .gid-icoon { width: 20px; height: 20px; color: var(--action); flex: none; }
.gid-aandacht__leeg { margin: 0; color: var(--body); }
.gid-aandacht__lijst { list-style: none; margin: 0; padding: 0; }
.gid-aandacht__lijst li + li { border-top: 1px solid var(--line); }
.gid-aandacht__lijst a {
  display: flex; align-items: center; gap: 12px; min-height: 48px;
  padding: 10px 0; text-decoration: none; color: var(--body);
}
.gid-aandacht__lijst a:hover .gid-aandacht__tekst,
.gid-aandacht__lijst a:focus-visible .gid-aandacht__tekst { text-decoration: underline; }
.gid-aandacht__getal {
  flex: none; min-width: 40px; height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #FDF0F0; color: #7C2620;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
}
.gid-aandacht__tekst { flex: 1 1 auto; }
.gid-aandacht__pijl { flex: none; color: var(--action); font-size: 1.1rem; }

/* 375px: het getal blijft naast de tekst staan (dat leest als een lijstje),
   maar de pijl gaat eruit; die kost breedte en zegt niets extra's op een
   telefoon waar de hele regel toch al aantikbaar is. */
@media (max-width: 420px) {
  .gid-aandacht { padding: 16px; }
  .gid-aandacht__lijst a { gap: 10px; }
  .gid-aandacht__pijl { display: none; }
  .gid-aandacht__getal { min-width: 34px; padding: 0 8px; font-size: .95rem; }
  .gid-aandacht__tekst { font-size: .95rem; }
}

/* Fase 36: de contactenlijst opgeruimd.

   Regelhoogtes. De tabel stond op de automatische kolomverdeling, en die gaf een
   kort e-mailadres bijna 400px terwijl de kolom Bron er 115 overhield. "Website
   (Gravity Forms)" brak daardoor over drie regels: dat waren de hoge regels met
   het lege gat eronder (bij Hester, Kitty Test en iedereen met die bron). Met
   vaste kolombreedtes is elke regel precies een regel hoog. */
.gid-tabelwikkel { overflow-x: auto; margin: .5rem 0 0; }
.gid-tabel { width: 100%; border-collapse: collapse; }

/* ==================================================================
   Fase 59.5: brede tabellen die niet meer buiten hun rand vallen

   Het scherm Verzonden mail liep over: de laatste kolom met de knop
   "Bekijk mail" werd afgekapt tot "Bekij". Drie dingen tegelijk kostten
   ruimte. Een tijdstip als "vrijdag 14 augustus 2026 03:01" brak over drie
   regels, de kolom Soort ook, en bij een teammelding staan er vier adressen
   onder elkaar in de kolom Naar. De knop kreeg wat overbleef, en dat was
   minder dan hij nodig had.

   DRIE MAATREGELEN, EN DE EERSTE IS DE BELANGRIJKSTE.

   1. Een lange ononderbroken tekst (een e-mailadres, een URL) mag een cel
      niet oprekken. Zonder overflow-wrap duwt een adres van 40 tekens de
      hele tabel breder dan zijn container, en dan is het toeval of de
      browser scrollt of afkapt.
   2. Elke tabel hoort in .gid-tabelwikkel te staan, die scrollt. Drie
      schermen hadden een losse div met dezelfde stijl erin geschreven; die
      zijn samengevoegd, zodat er een plek is waar dit geregeld wordt.
   3. Op een smal scherm wordt elke rij een blokje. Zie hieronder.
   ================================================================== */
.gid-tabel th,
.gid-tabel td { overflow-wrap: anywhere; }

/* Basisopmaak van een cel. Stond tot nu toe als inline stijl in elke tabel
   apart ("padding:8px 6px" op elke th en td, in zeven tabellen). Dat staat nu
   hier, zodat een volgende tabel hem vanzelf krijgt. De tabellen die hun inline
   stijl nog dragen veranderen niet: een inline stijl wint, en de waarden zijn
   dezelfde. */
.gid-tabel th {
  text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--line);
  font-family: var(--font-head); font-size: .92rem; color: var(--ink);
}
.gid-tabel td { padding: 8px 6px; border-bottom: 1px solid #EEF3F2; vertical-align: top; }

/* Een tijdstip of een bedrag hoort nooit midden in een getal te breken. */
.gid-tabel .gid-col-nowrap { white-space: nowrap; }

/* NOOIT table-layout: fixed COMBINEREN MET nowrap ZONDER AFKAPPEN.

   Dat ging hier mis. Verzonden mail kreeg een vaste kolomverdeling met 15% voor
   Tijdstip, en de cel stond op nowrap. Bij een vaste verdeling krijgt een kolom
   precies de opgegeven breedte, ook als de inhoud niet past; de tekst loopt dan
   gewoon door over de buurkolom heen. Op elke regel stond "14 aug 2026, 03:0"
   met de A van "Antwoord" eroverheen.

   Bij de AUTOMATISCHE verdeling kan dat niet gebeuren: die geeft een kolom nooit
   minder dan de breedte die de inhoud minimaal nodig heeft, en bij nowrap is dat
   de hele regel. De breedtes hieronder zijn daarmee wensen en geen bevelen, en
   Tijdstip krijgt vanzelf precies wat "14 aug 2026, 03:01" kost.

   .gid-contacttabel mag wel vast blijven: die kapt af met drie puntjes
   (overflow: hidden + text-overflow: ellipsis), dus daar kan niets overlopen. Een
   vaste verdeling is veilig zodra je afkapt, en anders niet. */
.gid-maillogtabel { min-width: 720px; }
/* Tijdstip en Gelukt? krijgen geen wens: die nemen precies wat ze nodig hebben,
   en dat is bij allebei weinig. De ruimte die vrijkomt gaat naar Onderwerp, want
   dat is sinds fase 59.5 de link en dus de kolom waar je heen kijkt. Soort mag
   over twee regels; die naam is soms een halve zin. */
.gid-maillogtabel th:nth-child(2), .gid-maillogtabel td:nth-child(2) { width: 20%; }
.gid-maillogtabel th:nth-child(3), .gid-maillogtabel td:nth-child(3) { width: 22%; }
.gid-maillogtabel th:nth-child(4), .gid-maillogtabel td:nth-child(4) { width: 34%; }
.gid-maillogtabel .gid-hint { display: block; }
/* Een mislukte mail valt op met kleur EN met het woord "nee" in de kolom
   Gelukt?; nooit met kleur alleen. */
.gid-maillogrij--mislukt { background: #FEF6F5; }

/* De rij als blokje op een telefoon.

   Waarom niet gewoon horizontaal scrollen: op een tabel van zes kolommen
   moet je dan heen en weer vegen om een regel te lezen, en je verliest bij
   het vegen uit beeld over WIE de regel ging. Als blokje staat alles van
   een regel onder elkaar, met het kolomlabel ervoor.

   Het label komt uit data-label op de cel; staat dat er niet, dan komt er
   ook geen label en schuift de waarde gewoon naar links. Zo kan een tabel
   die nog geen labels heeft hier niets aan stukmaken. */
@media (max-width: 700px) {
  .gid-tabelwikkel:has(.gid-tabel--blokjes) { overflow-x: visible; }

  .gid-tabel--blokjes,
  .gid-tabel--blokjes tbody,
  .gid-tabel--blokjes tr,
  .gid-tabel--blokjes td { display: block; width: 100%; }

  /* De koppen blijven bestaan voor schermlezers, maar staan niet in beeld;
     in blokjesvorm zou een kopregel boven alles hangen zonder betekenis. */
  .gid-tabel--blokjes thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* min-width uit: sommige tabellen dragen er een als inline stijl, en die
     zou hier alsnog een schuifbalk afdwingen. */
  .gid-tabel--blokjes { min-width: 0 !important; }

  .gid-tabel--blokjes tr {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; margin: 0 0 10px; background: var(--surface);
  }
  .gid-tabel--blokjes tr:last-child { margin-bottom: 0; }

  .gid-tabel--blokjes td {
    border: 0; padding: 3px 0; display: flex; gap: 10px; align-items: baseline;
    /* De contactenlijst kapt cellen af met drie puntjes omdat daar elke rij
       precies een regel hoog moet zijn. In een blokje is dat juist verkeerd:
       daar is ruimte en hoort de hele waarde te staan. */
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  .gid-tabel--blokjes td::before {
    content: attr(data-label);
    flex: 0 0 38%; min-width: 0;
    color: var(--muted); font-size: .85rem; line-height: 1.35;
  }
  .gid-tabel--blokjes td:not([data-label])::before { content: none; }

  /* Een lege cel levert in een blokje een lege regel op met alleen een label. */
  .gid-tabel--blokjes td:empty { display: none; }
}
.gid-contacttabel { table-layout: fixed; min-width: 820px; }

/* Een tabel met zes kolommen past niet in de leeskolom van 860px die de rest van
   het beheer gebruikt; dan wordt elke kolom afgekapt. Alleen op het scherm waar
   zo'n tabel staat mag de kolom breder. Kan de browser :has() niet, dan blijft
   het zoals het was en scrollt de tabel; niets gaat stuk. */
.gid-main:has(.gid-contacttabel) { max-width: 1240px; }
.gid-contacttabel th {
  text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--line);
  font-family: var(--font-head); font-size: .92rem; color: var(--ink); white-space: nowrap;
}
.gid-contacttabel td {
  padding: 10px 8px; border-bottom: 1px solid #EEF3F2; vertical-align: middle;
  /* Elke cel een regel: wat niet past krijgt drie puntjes, de volledige tekst
     staat in de tooltip (title) zodat er niets onbereikbaar wordt. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gid-contacttabel tbody tr:hover { background: #F7FAF9; }
/* Vijf kolommen sinds fase 36: Expert is een filter geworden, want in de lijst
   stond daar bij vrijwel elke rij een streepje. */
/* Fase 42: Soort draagt er een statuslabel bij, dus die kolom kreeg ruimte.
   Die ruimte komt van Naam en E-mail, die allebei ruim in hun jasje zaten. */
.gid-col-datum { width: 14%; }
.gid-col-naam { width: 24%; }
.gid-col-soort { width: 22%; }
.gid-col-mail { width: 25%; }
.gid-col-bron { width: 15%; }
.gid-contacttabel .gid-leeg { color: var(--muted); }

/* Filters: dezelfde vormtaal als de rest van het beheer, in plaats van kale
   browservakjes. Eigen pijltje, want een select met appearance:none heeft er
   zelf geen meer. */
.gid-filterbalk--net {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin: 1rem 0;
}
.gid-filterbalk--net label {
  font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1.9;
}
.gid-filterbalk--net select,
.gid-filterbalk--net input[type="search"] {
  font: inherit; font-size: .95rem; font-weight: 400; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 9px 12px; min-height: 42px; width: 100%;
}
.gid-filterbalk--net select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; min-width: 150px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336514F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.gid-filterbalk--net input[type="search"] { min-width: 210px; }
.gid-filterbalk--net select:focus-visible,
.gid-filterbalk--net input[type="search"]:focus-visible {
  outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action);
}
.gid-filterbalk--net .btn { margin-bottom: 1px; }

/* "Uitleg en cijfers": een echte inklapper in plaats van een kale summary met
   het blauwe standaardrandje van de browser. */
.gid-uitleg { margin: 0 0 1rem; }
.gid-uitleg > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; padding: 8px 14px; min-height: 40px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-weight: 600; font-size: .95rem; color: var(--action); background: var(--surface);
}
.gid-uitleg > summary::-webkit-details-marker { display: none; }
.gid-uitleg > summary::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6E6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform .15s ease;
}
.gid-uitleg[open] > summary::before { transform: rotate(90deg); }
.gid-uitleg > summary:hover { border-color: var(--action); }
.gid-uitleg > summary:focus { outline: none; }
.gid-uitleg > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.gid-uitleg__body {
  padding: 14px 16px; margin-top: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
}
.gid-contacttotaal { margin: 0 0 .75rem; }

@media (max-width: 560px) {
  .gid-filterbalk--net { padding: 12px; gap: 10px; }
  .gid-filterbalk--net label { flex: 1 1 100%; }
  .gid-filterbalk--net select,
  .gid-filterbalk--net input[type="search"] { min-width: 0; }
}


/* Fase 36: sorteerbare kolomkoppen. De hele kop is de link; de pijl zegt in
   welke richting er nu gesorteerd is. */
.gid-sorteer {
  display: inline-flex; align-items: center; gap: 5px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.gid-sorteer:hover { color: var(--action); text-decoration: underline; }
.gid-sorteer--aan { color: var(--action); }
.gid-sorteer span { font-size: .85em; }

/* Schakelaar in de filterbalk (team en tests tonen). Staat op een eigen regel
   onderin, want het hoort niet bij een van de keuzelijsten. */
.gid-filterschakel {
  flex: 1 1 100%; display: flex; align-items: center; gap: 8px;
  font-weight: 400; font-size: .9rem; color: var(--body); cursor: pointer;
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px;
}
.gid-filterschakel input { width: 18px; height: 18px; accent-color: var(--action); cursor: pointer; }

/* Echte pager: eerste, een venster rond de huidige pagina, en de laatste. */
.gid-pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 1.25rem 0;
}
.gid-pager__nr, .gid-pager__nu, .gid-pager__stap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: .95rem; text-decoration: none; border: 1px solid var(--line-strong);
}
.gid-pager__nr { color: var(--action); background: var(--surface); }
.gid-pager__nr:hover { border-color: var(--action); background: #F1F8F8; }
.gid-pager__nu {
  background: var(--action); border-color: var(--action); color: #fff; font-weight: 700;
}
.gid-pager__stap { color: var(--action); background: var(--surface); }
.gid-pager__stap:hover { border-color: var(--action); }
.gid-pager__stap--uit { color: var(--muted); border-color: var(--line); cursor: default; }
.gid-pager__gat { color: var(--muted); padding: 0 2px; }

@media (max-width: 560px) {
  .gid-pager__nr, .gid-pager__nu, .gid-pager__stap { min-width: 44px; min-height: 44px; padding: 0 10px; }
  .gid-pager__stap { flex: 1 1 100%; }
}

/* Dezelfde vormtaal voor de keuzelijsten op een detailkaart; die waren nog kale
   browservakjes terwijl de filterbalk ernaast wel de huisstijl volgde. */
.gid-kaart select {
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 9px 34px 9px 12px; min-height: 42px; max-width: 100%; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336514F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.gid-kaart select:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); }

/* De dekkingsregel: waar gaan deze cijfers over? Rustig van kleur, want het is
   geen fout maar een leesinstructie; wel opvallend genoeg om niet te missen. */
.gid-dekking {
  background: #FFF8E9; border: 1px solid #E4C87A; color: #5C4712;
  font-size: .95rem; align-items: flex-start;
}
.gid-dekking::before {
  content: "i"; font-weight: 700; font-family: var(--font-head); flex: none;
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}

/* ============================================================
   Fase 42: profielstatus van een expert (online / offline / prullenbak).
   Zelfde vorm als de bestaande pil-labels (gid-wachtlabel, gid-supportlabel):
   afgeronde pil, woord erin, kleur alleen als extra. Nooit alleen kleur, want
   dan is het onleesbaar voor wie kleuren niet onderscheidt.
   ============================================================ */
.gid-statuslabel {
  display: inline-flex; align-items: center; white-space: nowrap;
  margin-left: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; line-height: 1.4;
}
.gid-statuslabel--online { background: #EDF8F0; color: #1D5130; border: 1px solid #2E7D46; }
.gid-statuslabel--offline { background: #FFF6E5; color: #8A5A00; border: 1px solid #E3B75E; }
.gid-statuslabel--weg { background: #FBECEC; color: #8A2020; border: 1px solid #D08A8A; }
.gid-statuslabel--los { background: #F1F1F4; color: #45454F; border: 1px solid #B9B9C4; }

/* De statusregel onder het cijferblok: een momentopname, geen maandcijfer. */
.gid-cijferblok__status { margin: .5rem 0 0; font-size: .9rem; }
.gid-cijferblok__status .gid-statuslabel { margin: 2px 4px 2px 0; }
.gid-cijferblok__zonderaccount { margin: .5rem 0 0; font-size: .9rem; }
.gid-cijferblok__zonderaccount summary { cursor: pointer; color: var(--action); font-weight: 600; }
.gid-cijferblok__zonderaccount ul { margin: .4rem 0 0; padding-left: 1.2rem; columns: 2; }
.gid-cijferblok__zonderaccount li { break-inside: avoid; margin: 0 0 .2rem; }
@media (max-width: 640px) { .gid-cijferblok__zonderaccount ul { columns: 1; } }

/* ============================================================
   Fase 43: de meekijkbalk. Staat op elk dashboardscherm zodra een teamlid
   meekijkt in het dashboard van een expert, en is bewust niet weg te klikken:
   wie hem niet ziet, denkt in zijn eigen dashboard te zitten.
   ============================================================ */
.gid-meekijkbalk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 0 0 1.25rem; padding: 14px 18px; border-radius: 14px;
  background: #FFF6E5; border: 2px solid #E3B75E; color: #4a3410;
}
.gid-meekijkbalk__tekst { margin: 0; flex: 1 1 320px; font-size: .95rem; line-height: 1.5; }
.gid-meekijkbalk__fijn { font-size: .85rem; color: #6b5426; flex-basis: 100%; }
.gid-meekijkbalk .btn { flex: none; }

/* Fase 44: een storing in het aandachtsblok. Rood, met een uitroepteken in
   plaats van een aantal, want "1 kapotte taak" zegt niets. */
.gid-aandacht__storing .gid-aandacht__getal {
  background: #FBECEC; color: #8A2020; border: 1px solid #D08A8A;
}
.gid-aandacht__storing .gid-aandacht__tekst { font-weight: 600; }
.gid-statuslabel--demo { background: #EDE9FE; color: #5B21B6; border: 1px solid #A78BFA; }

/* Fase 46: tekstsecties met een tekstteller. */
.gid-teller { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.gid-teller--vol { color: #8A2020; font-weight: 600; }

/* ==================================================================
   Fase 48: zijbalk, takenlijst en klikbare cijfertegels
   ================================================================== */

/* De zijbalk. Op een breed scherm naast de inhoud, op een smal scherm een
   uitklapper erboven. De lijst staat twee keer in de HTML (zie
   includes/zijbalk.php); de mediaquery laat er precies een van zien. */
.gid-beheer { width: 100%; }
.gid-zijbalk__kop {
  margin: 1.25rem 0 .35rem; font-family: var(--font-head); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.gid-zijbalk__kop--stil { color: #9AA9A8; }
.gid-zijbalk__lijst { list-style: none; margin: 0; padding: 0; }
.gid-zijbalk__lijst--thuis { margin-bottom: .35rem; }
.gid-zijbalk__link {
  display: block; min-height: 40px; padding: 9px 12px; border-radius: 10px;
  text-decoration: none; color: var(--body); font-size: .95rem; line-height: 1.35;
}
.gid-zijbalk__link:hover, .gid-zijbalk__link:focus-visible { background: #EFF5F4; color: var(--ink); }
.gid-zijbalk__link--aan {
  background: #EFF8F8; color: var(--ink); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}
/* De tweede groep rustiger: die schermen komt Anne bijna nooit. */
.gid-zijbalk__kop--stil + .gid-zijbalk__lijst .gid-zijbalk__link { color: var(--muted); font-size: .92rem; }
.gid-zijbalk__kop--stil + .gid-zijbalk__lijst .gid-zijbalk__link--aan { color: var(--ink); }

/* Smal: uitklapmenu bovenaan. Anne werkt niet altijd achter een laptop. */
.gid-zijbalk--vast { display: none; }
.gid-zijbalk--uitklap {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 4px 12px 8px; margin: 0 0 1.25rem;
}
.gid-zijbalk__knop {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center;
  gap: 8px; font-family: var(--font-head); color: var(--ink); font-size: 1rem;
}
.gid-zijbalk__knop::-webkit-details-marker { display: none; }
.gid-zijbalk__knop::before {
  content: ""; width: 18px; height: 2px; background: currentColor; flex: none;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.gid-zijbalk--uitklap[open] .gid-zijbalk__knop { border-bottom: 1px solid var(--line); }
.gid-zijbalk__paneel { padding-bottom: 6px; }

@media (min-width: 901px) {
  .gid-zijbalk--uitklap { display: none; }
  .gid-zijbalk--vast {
    display: block; position: sticky; top: 16px; align-self: start;
    max-height: calc(100vh - 32px); overflow-y: auto;
  }
  .gid-beheer { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 28px; align-items: start; }
  .gid-zijbalk__kop:first-child, .gid-zijbalk__lijst--thuis { margin-top: 0; }
}
/* Met een zijbalk ernaast heeft de inhoud meer breedte nodig; anders wordt elke
   tabel afgekapt. Kan de browser :has() niet, dan blijft het zoals het was. */
.gid-main:has(.gid-beheer) { max-width: 1240px; }

/* De takenlijst. Elke regel een ding dat om een reactie vraagt, met de
   wachttijd erbij en een knop om af te vinken. */
.gid-aandacht__telling {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 8px; margin-left: 4px;
  border-radius: 999px; background: #FDF0F0; color: #7C2620;
  font-size: .9rem; font-weight: 700;
}
.gid-aandacht--signalen { border-width: 1px; }
.gid-taken { list-style: none; margin: 0; padding: 0; }
.gid-taak {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line);
}
.gid-taken > .gid-taak:first-child { border-top: 0; }
.gid-taak__tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.gid-taak__soort {
  flex: none; background: #EFF5F4; color: var(--muted); border-radius: 999px;
  padding: 2px 10px; font-size: .8rem; font-weight: 600;
}
.gid-taak__titel { color: var(--ink); font-weight: 600; text-decoration: none; }
.gid-taak__titel:hover, .gid-taak__titel:focus-visible { text-decoration: underline; }
.gid-taak__detail { color: var(--muted); font-size: .92rem; }
.gid-taak__wacht { flex-basis: 100%; color: var(--muted); font-size: .88rem; }
.gid-taak--oud .gid-taak__wacht { color: #8A2B2B; font-weight: 600; }
/* Wie kijkt hier nu nog meer naar. Geen alarm, wel opvallend genoeg om te zien
   voordat je hetzelfde item oppakt. */
.gid-taak__kijker {
  flex-basis: 100%; color: #7A5A12; background: #FDF6E3; border: 1px solid #E9D9A8;
  border-radius: 8px; padding: 2px 8px; font-size: .85rem;
}
.gid-taak__knop { flex: none; margin: 0; }
.gid-taak--af .gid-taak__titel { font-weight: 500; }
.gid-taken__meer, .gid-taken__naar { margin: .75rem 0 0; font-size: .95rem; }

/* Fase 59: toewijzen. De naam staat op een eigen regel onder de taak, in een
   rustige tint: het is een feit, geen waarschuwing, en het mag de rode
   wachttijd van een oude taak niet overstemmen. */
.gid-taak__toegewezen {
  flex-basis: 100%; color: #1F5E5C; background: #EDF6F6; border: 1px solid #CBE4E3;
  border-radius: 8px; padding: 2px 8px; font-size: .85rem;
}
.gid-taak--af .gid-taak__toegewezen { flex-basis: 100%; }
/* De twee knoppen onder elkaar, zodat de keuzelijst niet met de afvinkknop
   om dezelfde breedte vecht. */
.gid-taak__acties { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gid-taak__toewijs { display: flex; align-items: center; gap: 6px; margin: 0; }
.gid-taak__toewijs-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gid-taak__select {
  min-height: 44px; max-width: 190px; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 10px; font-size: .92rem; background: #fff; color: var(--ink);
}
/* De taak uit een toewijsmail: hij staat al bovenaan, dit maakt hem ook
   zichtbaar als je halverwege de lijst terechtkomt. */
.gid-taak--gemarkeerd {
  background: #FDF6E3; border-left: 4px solid #E0A82E; border-top-color: transparent;
  padding-left: 10px; border-radius: 8px;
}

/* Een cijfertegel die ergens heen gaat, moet zich ook zo gedragen. */
.gid-cijfer--link { text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.gid-cijfer--link:hover, .gid-cijfer--link:focus-visible {
  border-color: var(--primary); box-shadow: 0 2px 10px rgba(18, 56, 54, .10);
}
.gid-cijfer--link:hover .gid-cijfer__label,
.gid-cijfer--link:focus-visible .gid-cijfer__label { text-decoration: underline; }

/* De profielfoto in de contactenlijst: klein, rond en luilaadend. */
.gid-col-foto { width: 44px; }
.gid-contacttabel td.gid-col-foto { padding-right: 0; overflow: visible; }
.gid-minifoto--rond { width: 32px; height: 32px; display: block; }

/* De meekijkknoppen zijn formulieren geworden (zie includes/meekijken.php);
   die mogen geen extra ruimte in een tabelcel of in de balk innemen. */
.gid-meekijkknop { display: inline; margin: 0; }

@media (max-width: 560px) {
  .gid-taak { flex-wrap: wrap; }
  .gid-taak__knop { margin-left: auto; }
  /* Fase 59: op een telefoon naast elkaar, want onder elkaar wordt elke
     taakregel anders twee keer zo hoog. */
  .gid-taak__acties { flex-direction: row; flex-wrap: wrap; margin-left: auto; }
  .gid-taak__select { max-width: 150px; }
}

/* ==================================================================
   Fase 49: het bord bij Matching, en de cijferregel
   ================================================================== */

/* Een regel in plaats van zeven tegels op het beheeroverzicht. */
.gid-cijferregel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 0 0 1.5rem; padding: 12px 16px; font-size: .95rem; color: var(--body);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.gid-cijferregel strong { color: var(--ink); }
.gid-cijferregel__tekst { flex: 1 1 auto; min-width: 0; }
.gid-cijferregel__link { flex: none; white-space: nowrap; }

/* HET BORD MAG DE VOLLE BREEDTE VAN HET SCHERM GEBRUIKEN, ook met de zijbalk
   ernaast. De eerste versie perste alle zeven kolommen binnen de leeskolom van
   het beheer; ze pasten, maar een kaart las niet meer prettig. Een bord hoort
   brede kolommen te hebben en horizontaal te schuiven, zoals Anne het in
   GoHighLevel gewend was en zoals Trello en Jira het doen. */
.gid-main:has(.gid-bord) { max-width: none; }
/* De tekst eromheen blijft wel een leeskolom; een intro over 1600px leest niet. */
.gid-main:has(.gid-bord) .gid-beheer__inhoud > *:not(.gid-bord) { max-width: 980px; }

/* Zeven vaste kolommen van 300px. Vast, niet meegroeiend: een kaart moet even
   breed blijven of je nu drie of dertig kaarten hebt. */
.gid-bord {
  display: grid; grid-template-columns: repeat(7, 300px);
  gap: 12px; align-items: start; margin: 1rem 0 1.5rem;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
  /* De schuifbalk moet ALTIJD zichtbaar zijn. macOS verstopt hem standaard tot
     je hem aanraakt, en dan weet niemand dat er rechts nog kolommen staan.
     Zodra je ::-webkit-scrollbar opmaakt, tekent WebKit een gewone balk in
     plaats van de zwevende. scrollbar-color doet hetzelfde voor Firefox. */
  scrollbar-width: auto;
  scrollbar-color: #8FADAB #E2EAE9;
}
.gid-bord::-webkit-scrollbar { height: 14px; -webkit-appearance: none; }
.gid-bord::-webkit-scrollbar-track { background: #E2EAE9; border-radius: 999px; }
.gid-bord::-webkit-scrollbar-thumb {
  background: #8FADAB; border-radius: 999px; border: 3px solid #E2EAE9;
}
.gid-bord::-webkit-scrollbar-thumb:hover { background: #6F918F; }

/* Elke kolom scrolt zelf verticaal, en de kop met het aantal staat BUITEN dat
   schuifvlak. Daardoor blijft hij staan als je binnen een kolom naar beneden
   scrollt, zonder position:sticky (dat werkt hier niet betrouwbaar, want het
   bord is zelf al een schuifvlak). */
.gid-bordkolom {
  background: #F4F8F8; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 10px;
  display: flex; flex-direction: column;
  /* Deze hoogte is afgestemd op de schuifbalk, niet op de kaarten. Boven het
     bord staat ongeveer 285px kop (titel, tabs, intro); trek daar de balk en
     wat marge bij op en een volle kolom eindigt nog net binnen het scherm.
     Wordt de kolom hoger, dan zakt de horizontale schuifbalk onder de vouw en
     ziet niemand meer dat er rechts nog kolommen staan. */
  max-height: calc(100vh - 320px);
  min-height: 120px;
}
.gid-bordkolom__kop, .gid-bordkolom__uitleg { flex: none; }
.gid-bordkolom .gid-bordlijst, .gid-bordkolom__af {
  overflow-y: auto; min-height: 0; scrollbar-width: thin;
}
.gid-bordkolom--eind { background: var(--surface); }
.gid-bordkolom--sleepdoel { border-color: var(--primary); background: #EAF6F6; }
.gid-bordkolom__kop {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 2px; font-family: var(--font-head); font-size: .95rem; color: var(--ink);
}
.gid-bordkolom__aantal {
  flex: none; min-width: 24px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #E2EAE9; color: var(--ink);
  font-size: .85rem; font-weight: 700;
}
.gid-bordkolom__uitleg { margin: 0 0 10px; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.gid-bordkolom__leeg { margin: 0; font-size: .85rem; color: var(--muted); }
.gid-bordkolom__af summary { cursor: pointer; font-size: .88rem; color: var(--action); min-height: 32px; }
.gid-bordlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.gid-bordkaart {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 1px 3px rgba(18, 56, 54, .06);
}
.gid-bordkaart--sleept { opacity: .45; }
/* Lang wachten is het echte werk; dat mag opvallen. */
.gid-bordkaart--oud { border-left: 4px solid #C9782F; }
.gid-bordkaart__link { text-decoration: none; display: flex; flex-direction: column; gap: 1px; }
.gid-bordkaart__naam { font-weight: 600; color: var(--ink); }
.gid-bordkaart__link:hover .gid-bordkaart__naam { text-decoration: underline; }
.gid-bordkaart__expert { font-size: .88rem; color: var(--body); }
.gid-bordkaart__kanaal {
  align-self: flex-start; background: #EFF5F4; color: var(--muted);
  border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 600;
}
.gid-bordkaart__tijd { font-size: .82rem; color: var(--muted); }
.gid-bordkaart__sinds { font-size: .78rem; color: var(--muted); }
.gid-bordkaart--oud .gid-bordkaart__tijd { color: #8A5216; font-weight: 600; }
.gid-bordkaart__blind, .gid-bordkaart__signaal {
  font-size: .8rem; line-height: 1.35; border-radius: 8px; padding: 5px 8px; margin-top: 3px;
}
.gid-bordkaart__blind { background: #F4F8F8; color: var(--muted); border: 1px solid #D5E4E4; }
.gid-bordkaart__signaal { background: #FDF6E3; color: #7A5A12; border: 1px solid #E9D9A8; }
.gid-bordkaart__hand { font-size: .78rem; color: var(--muted); font-style: italic; }
/* Fase 72: de factuurstand op de kaart in de eindkolom. Rustig, want dit is
   informatie waar Anne niets mee hoeft te doen; het rode merkteken ernaast
   gebruikt de opmaak van __signaal en valt daardoor wel op. */
.gid-bordkaart__factuur { display: block; font-size: .78rem; color: var(--muted);
  border-top: 1px solid #EDEDED; margin-top: .35rem; padding-top: .35rem; }
.gid-bordkaart__verplaats { margin: 6px 0 0; }
/* Fase 53: de redenlijst hoort er hetzelfde uit te zien als de kolomlijst
   erboven. Bewust op de selector en niet door de klasse gid-bordkaart__keuze
   aan het redenveld te hangen: de sleepcode zoekt die klasse op met
   querySelector en zou dan de verkeerde lijst kunnen pakken. */
.gid-bordkaart__keuze,
.gid-bordkaart__reden select { width: 100%; font-size: .82rem; padding: 5px 6px; min-height: 34px; }
/* Het label staat erboven, dus de lijst heeft een klein beetje lucht nodig. */
.gid-bordkaart__reden select { margin-top: 2px; }

/* De kolomkiezer: alleen op een smal scherm, waar maar een kolom past. */
.gid-bordkiezer { display: none; }
.gid-bordchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); color: var(--body); font-size: .9rem;
}
.gid-bordchip--aan { background: #EFF8F8; border-color: var(--primary); color: var(--ink); font-weight: 600; }
.gid-bordchip__aantal { font-weight: 700; color: var(--ink); }

/* Zeven kolommen passen niet op een telefoon. Daar tonen we er een, gekozen met
   de chips hierboven; alle zeven staan wel in de HTML, dus er is geen
   JavaScript nodig en de keuze overleeft een herlaadbeurt. */
@media (max-width: 900px) {
  .gid-bordkiezer { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; }
  .gid-bord { grid-template-columns: 1fr; overflow-x: visible; overflow-y: visible; }
  .gid-bordkolom:not(.gid-bordkolom--actief) { display: none; }
  /* Een kolom die de hele breedte heeft hoeft niet zelf te schuiven; laat hem
     gewoon met de pagina meelopen. */
  .gid-bordkolom { max-height: none; }
  .gid-bordkolom .gid-bordlijst, .gid-bordkolom__af { overflow-y: visible; }
  .gid-main:has(.gid-bord) .gid-beheer__inhoud > *:not(.gid-bord) { max-width: none; }
}

.gid-bordlog__lijst { list-style: none; margin: 0; padding: 0; }
.gid-bordlog__lijst li { padding: 6px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.gid-bordlog__lijst li:first-child { border-top: 0; }

/* ==================================================================
   Fase 50: het berichtvenster bij een contact
   ================================================================== */
.gid-postlijst { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gid-post { border-radius: 12px; padding: 10px 14px; border: 1px solid var(--line); }
/* Uitgaand en inkomend moeten in een oogopslag uit elkaar te houden zijn, en
   niet alleen op kleur: uitgaand staat ingesprongen. */
.gid-post--uit { background: #EFF8F8; border-color: #CFE6E6; margin-left: 2rem; }
.gid-post--in { background: var(--surface); margin-right: 2rem; }
.gid-post__wie { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .9rem; }
.gid-post__tekst { margin: 0; white-space: pre-wrap; color: var(--body); }
.gid-postformulier { margin: 0; }
@media (max-width: 560px) {
  .gid-post--uit { margin-left: .75rem; }
  .gid-post--in { margin-right: .75rem; }
}

/* ==================================================================
   Fase 50 deel 2: de tijdlijn bij een contact
   ================================================================== */
.gid-tijdlijn { list-style: none; margin: 0; padding: 0; }
.gid-tijdlijn__regel { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #EEF3F2; }
.gid-tijdlijn__regel:first-child { border-top: 0; }
.gid-tijdlijn__icoon {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EFF5F4; color: var(--muted); font-size: .85rem;
}
/* Uitgaand en inkomend verschillen in kleur EN in richting van het pijltje,
   zodat het niet alleen op kleur te zien is. */
.gid-tijdlijn__regel--bericht-uit .gid-tijdlijn__icoon { background: #EFF8F8; color: #1F6E6B; }
.gid-tijdlijn__regel--bericht-in .gid-tijdlijn__icoon { background: #FDF6E3; color: #7A5A12; }
.gid-tijdlijn__body { flex: 1 1 auto; min-width: 0; }
.gid-tijdlijn__kop { margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.gid-tijdlijn__tekst { margin: 0; white-space: pre-wrap; color: var(--body); }
.gid-tijdlijn__fout { margin: .25rem 0 0; color: #8A2B2B; font-size: .9rem; }
.gid-tijdlijn__bijlage { margin: .25rem 0 0; color: var(--muted); font-size: .88rem; }
.gid-tijdlijn__volledig summary { cursor: pointer; color: var(--action); font-size: .88rem; margin-top: .25rem; }

/* ------------------------------------------------------------------ *
 |  Fase 53: bronfilter op het bord, handgemaakte borden, interne notitie
 * ------------------------------------------------------------------ */

.gid-bordbronfilter { margin: 0 0 .85rem; }
.gid-bordbronfilter legend { padding: 0; margin: 0 0 .35rem; }
.gid-bordbronfilter__optie {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 0 .85rem .35rem 0; font-size: 15px;
}
/* Tikvlak van minstens 44px, zoals de rest van het dashboard (Clarity-fixes). */
.gid-bordbronfilter__optie input { width: 20px; height: 20px; }

.gid-bordfilter { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; margin: 0 0 1rem; }
.gid-bordfilter .gid-veld { margin: 0 0 .5rem; }

.gid-bordtoevoegen { padding: .5rem 0 0; }
.gid-bordtoevoegen .gid-veld { margin: 0 0 .6rem; }

.gid-bordkaart__meer { margin-top: .4rem; font-size: 14px; }
.gid-bordkaart__meer summary { cursor: pointer; color: var(--gid-stil, #6b807e); }
.gid-bordkaart__meer .gid-veld { margin: 0 0 .45rem; }
.gid-bordkaart__weg { margin-top: .5rem; }

.gid-notities {
  border-top: 1px solid #EEF3F2; margin-top: .85rem; padding-top: .85rem;
}
.gid-notities__kop { margin: 0 0 .2rem; font-size: 16px; }
.gid-notities__lijst { list-style: none; margin: .6rem 0; padding: 0; }
.gid-notitie {
  background: #F7FAF9; border-radius: 10px; padding: .6rem .75rem; margin: 0 0 .5rem;
}
.gid-notitie__tekst { margin: 0; }
.gid-notitie__wie { margin: .25rem 0 0; }
.gid-notitieformulier textarea { margin: 0 0 .5rem; }

/* Fase 53: het bord Nog geen expert. Het redenveld verschijnt bij de laatste
   kolom; de maatvoering van de lijst zelf staat bij .gid-bordkaart__keuze,
   zodat de twee lijsten op een kaart niet uit elkaar kunnen gaan lopen. */
.gid-bordkaart__reden { display: block; margin: .4rem 0 .3rem; font-size: 13px; }
.gid-filteraan {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  background: #FFF6E5; border-radius: 10px; padding: .6rem .8rem; margin: 0 0 1rem;
  font-size: 15px;
}

/* Fase 53: de groep Pijplijnen in de zijbalk. Vier borden achter een regel,
   zodat de rest van de zijbalk niet verdrinkt. Geen aantallen: de takenlijst
   blijft de enige plek die zegt wat er dringend is. */
.gid-zijbalk__groep { margin: 0; }
.gid-zijbalk__groepknop {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem;
}
.gid-zijbalk__groepknop::-webkit-details-marker { display: none; }
/* Het pijltje draait mee met de stand, zodat je ziet of er nog iets onder zit. */
.gid-zijbalk__groepknop::before {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .12s ease;
}
.gid-zijbalk__groep[open] > .gid-zijbalk__groepknop::before { transform: rotate(90deg); }
.gid-zijbalk__lijst--sub { margin: 0; padding: 0; list-style: none; }
.gid-zijbalk__link--sub { padding-left: 1.6rem; font-size: 15px; }
/* Op een smal scherm staat de groep plat open; daar is een kopje genoeg. */
.gid-zijbalk__groep--plat { list-style: none; }
.gid-zijbalk__groepkop {
  display: block; padding: .35rem .75rem 0; font-size: 13px; font-weight: 600;
  color: var(--gid-stil, #6b807e);
}

/* Fase 53: het redenveld verschijnt pas bij "Geen vervolg". Alleen verbergen
   als JavaScript draait (klasse gid-js), want zonder JavaScript moet je een
   reden kunnen kiezen; anders is een kaart niet meer af te sluiten. */
.gid-js .gid-bordkaart__reden { display: none; }
.gid-js .gid-bordkaart__reden.is-nodig { display: block; }
.gid-bordkaart__verplaats .btn { margin-top: .35rem; }

/* ------------------------------------------------------------------ *
   Suggestielijst bij "Waar werk je?"

   HET GEDRAG KOMT UIT HET THEMA: resources/scripts/zoek-suggesties.js, hetzelfde
   component als de zoekbalk op de homepage en op /hulp-zoeken/. In dat bestand
   staat met zoveel woorden dat een tweede variant ernaast langzaam uit elkaar
   groeit; daarom laadt het dashboard datzelfde bestand in plaats van het na te
   bouwen.

   DEZE ZES REGELS ZIJN WEL EEN KOPIE, uit resources/styles/app.css (zoek op
   .hero-search__sug). Het dashboard laadt de stylesheet van het thema niet, en
   die variabelen bestaan hier niet allemaal. Wijzigt de opmaak daar, dan hoort
   het hier ook te wijzigen; vandaar deze verwijzing.
 * ------------------------------------------------------------------ */
.gid-plaatsrij { position: relative; }
.hero-search__sug {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin: 6px 0 0; padding: 6px;
  list-style: none; background: var(--surface, #fff); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); max-height: 320px; overflow: auto; text-align: left;
}
.hero-search__sug[hidden] { display: none; }
.hero-search__sug-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; min-height: 44px; border-radius: 8px; cursor: pointer;
  color: var(--ink); font-size: .95rem;
}
.hero-search__sug-opt:hover, .hero-search__sug-opt.is-active { background: #EAF6F5; }
.hero-search__sug-opt .t { color: var(--muted); font-size: .78rem; flex: none; }

/* Onderdeel 3: de groepskoppen op het startscherm en de berichten van ons. */
.gid-groepskop { font-size: 1.05rem; margin: 28px 0 10px; color: var(--muted); font-weight: 600; }
.gid-groepskop:first-of-type { margin-top: 8px; }
.gid-update { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.gid-update:first-of-type { border-top: 0; }
.gid-update__kop { font-size: 1.1rem; margin: 0 0 2px; }