@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

:root {
  --achtergrond: #f3efe6;
  --oppervlak: #ffffff;
  --rand: #e6e1d3;
  --tekst: #1a1917;
  --gedempt: #756f61;

  --sidebar: #17161a;
  --sidebar-tekst: #f3efe6;
  --sidebar-rand: #2c2b2f;

  --email: #2f6fed;
  --email-tint: #e4ecfd;
  --kaart-kleur: #d9891f;
  --kaart-tint: #fbeed9;
  --instagram: #8b5cf6;
  --instagram-tint: #efe7fd;
  --facebook: #4c6fe0;
  --facebook-tint: #e6ebfc;
  --telefoon: #4b5563;
  --telefoon-tint: #e7e9ec;

  --succes: #1e9e6b;
  --succes-tint: #dff3e9;
  --waarschuwing: #c98a1e;
  --waarschuwing-tint: #f8ecd7;
  --danger: #d64545;
  --danger-tint: #fbe3e3;
  --neutraal: #8a8778;
  --neutraal-tint: #eeebe1;

  --radius: 0.875rem;
}

body {
  margin: 0;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--achtergrond);
  color: var(--tekst);
  display: flex;
  min-height: 100vh;
}

.muted { color: var(--gedempt); font-size: 0.85rem; }
a { color: inherit; }

/* --- Sidebar --- */
/* .sidebar reserveert de vaste ingeklapte breedte in de layout (flex-item
   naast main), .sidebar-inner draagt de echte achtergrond/inhoud en is
   absoluut gepositioneerd erbovenop. Zo kan .sidebar-inner bij :hover
   breder worden zonder dat main meeschuift: de uitgeklapte staat overlapt
   simpelweg de pagina-inhoud i.p.v. 'm opzij te duwen. */
.sidebar {
  width: 4rem;
  flex-shrink: 0;
  /* sticky i.p.v. min-height: op een lange pagina rekte de sidebar anders
     mee uit met de hoofdinhoud, waardoor de onderkant-knoppen (tutorial,
     avatar, uitloggen) buiten beeld raakten totdat je helemaal naar
     onderen scrolde. */
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  height: 100%;
  background: var(--sidebar);
  color: var(--sidebar-tekst);
  border-right: 1px solid var(--sidebar-rand);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 40;
  transition: width 0.15s ease;
}
.sidebar:hover .sidebar-inner {
  width: 14rem;
  align-items: stretch;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.sidebar-logo {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: var(--sidebar-tekst);
  color: var(--sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.sidebar-link {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  text-decoration: none;
  color: rgba(243, 239, 230, 0.6);
  position: relative;
  overflow: hidden;
  transition: width 0.15s ease;
}
.sidebar-link svg { display: block; flex-shrink: 0; }
.sidebar-link:hover { background: var(--sidebar-rand); color: var(--sidebar-tekst); }
.sidebar-link.actief { background: var(--sidebar-tekst); color: var(--sidebar); }
.sidebar-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  transition: opacity 0.1s ease, max-width 0.15s ease;
}
.sidebar:hover .sidebar-link {
  width: 100%;
  justify-content: flex-start;
  padding-left: 0.6rem;
}
.sidebar:hover .sidebar-label { opacity: 1; max-width: 10rem; }
.sidebar-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.1rem;
  text-align: center;
}
.sidebar:hover .sidebar-badge { position: static; margin-left: auto; }
.sidebar-onder { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; }
.sidebar-avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sidebar-rand);
  color: var(--sidebar-tekst);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

/* --- Layout --- */
main { padding: 2rem; max-width: 1100px; margin: 0 auto; width: 100%; }
h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: var(--oppervlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rand); font-size: 0.9rem; }
thead th { color: var(--gedempt); font-weight: 500; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--achtergrond); }

/* --- Prospects-kanban (index.php) --- */
.kanban-rij { display: flex; gap: 1rem; overflow-x: auto; padding: 0.25rem 0.25rem 1rem; margin-top: 1rem; align-items: flex-start; }
.kanban-kolom { flex: 0 0 260px; width: 260px; }
.kanban-kolom-header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.25rem 0.6rem; }
.kanban-kolom-header .stip { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0; }
.kanban-kaart { background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.85rem; margin-bottom: 0.6rem; cursor: pointer; }
.kanban-kaart:hover { border-color: var(--gedempt); }

/* Filter-dropdown (details/summary, geen los modal-component nodig) */
.filter-details { position: relative; }
.filter-details summary { list-style: none; cursor: pointer; margin-top: 0; }
.filter-details summary::-webkit-details-marker { display: none; }
.filter-paneel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 10;
  width: 16rem;
  background: var(--oppervlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* --- Login: tweekoloms grid zoals de mockup, donker paneel + wit paneel --- */
.login-body { width: 100%; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-links {
  background: var(--sidebar);
  color: var(--sidebar-tekst);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-links h2 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 1rem; }
.login-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.login-badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--sidebar-rand);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  color: rgba(243, 239, 230, 0.85);
}
.login-badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }

.login-rechts { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-kaart { width: 100%; max-width: 360px; }
.login-kaart h1 { margin-bottom: 0.25rem; }
.login-logo { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: var(--sidebar-tekst); color: var(--sidebar); border-radius: 0.5rem; font-weight: 600; }
.login-kaart form { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1rem; }
.login-kaart label { font-size: 0.8rem; color: var(--gedempt); margin-top: 0.5rem; }
.login-kaart input { padding: 0.6rem 0.75rem; border: 1px solid var(--rand); border-radius: 0.5rem; font-size: 0.9rem; }
.login-kaart button { margin-top: 1.25rem; padding: 0.65rem; width: 100%; background: var(--sidebar); color: var(--sidebar-tekst); border: none; border-radius: 0.5rem; font-size: 0.9rem; cursor: pointer; }
.foutmelding { background: var(--danger-tint); color: var(--danger); padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.85rem; }

/* Icoon in het inlogveld, links naast de tekst */
.login-veld-icoon { position: relative; display: flex; align-items: center; }
.login-veld-icoon svg { position: absolute; left: 0.75rem; color: var(--gedempt); pointer-events: none; }
.login-veld-icoon input { width: 100%; padding-left: 2.25rem; }

.login-onthouden-rij { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; font-size: 0.8rem; }
.login-checkbox-label { display: flex; align-items: center; gap: 0.4rem; color: var(--gedempt); margin-top: 0; cursor: pointer; }
.login-checkbox-label input[type="checkbox"] { width: 0.95rem; height: 0.95rem; }
.login-vergeten summary { color: var(--gedempt); cursor: pointer; list-style: none; }
.login-vergeten summary::-webkit-details-marker { display: none; }
.login-vergeten summary:hover { color: var(--tekst); }
.login-vergeten p { margin: 0.4rem 0 0; max-width: 14rem; text-align: right; }

.info-koppelen { margin-top: 0.6rem; }
.info-koppelen summary { color: var(--gedempt); cursor: pointer; list-style: none; font-size: 0.85rem; }
.info-koppelen summary::-webkit-details-marker { display: none; }
.info-koppelen summary:hover { color: var(--tekst); }
.info-koppelen ol, .info-koppelen p { margin: 0.4rem 0 0; font-size: 0.85rem; }
.info-koppelen ol { padding-left: 1.1rem; }

.login-beveiligd { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 1rem; font-size: 0.75rem; color: var(--gedempt); }

@media (max-width: 800px) {
  .login-body { grid-template-columns: 1fr; }
  .login-links { display: none; }
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* --- Detail scherm --- */
.detail-header { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--succes-tint); color: var(--succes); display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.avatar-klein { width: 2rem; height: 2rem; border-radius: 50%; background: var(--neutraal-tint); color: var(--neutraal); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; flex-shrink: 0; }
.avatar-klein-groen { background: var(--succes-tint); color: var(--succes); }

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--rand); margin: 1.5rem 0; padding-bottom: 0.75rem; }
.tabs a { padding: 0.5rem 0.75rem; text-decoration: none; color: var(--gedempt); border-bottom: 2px solid transparent; margin-bottom: -0.8125rem; font-size: 0.9rem; }
.tabs a.actief { color: var(--tekst); border-bottom-color: var(--tekst); font-weight: 500; }

/* Pil-tabs (kanaal-keuze in copy-generatie): donkere vulling voor de
   actieve tab, zoals in de mockup, i.p.v. onderstreepte tekstlinks. */
.pil-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.pil-tabs a {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--tekst);
  border: 1px solid var(--rand);
  background: var(--oppervlak);
}
.pil-tabs a.actief { background: var(--sidebar); color: var(--sidebar-tekst); border-color: var(--sidebar); }

.kaart { background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.kaart h2 { margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gedempt); }

.rij { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--rand); }
.rij:last-child { border-bottom: none; }
.rij p { margin: 0; }
/* Veelgebruikte variant zonder rand/padding, was tot nu toe overal los als
   inline style="border:none;padding:0" herhaald. */
.rij-vlak { border: none; padding: 0; }
/* Compactere rij voor lange lijsten (bv. de scoretoelichting), bewust
   krapper dan de standaard .rij-padding, i.p.v. een losse inline waarde. */
.rij-compact { padding: 0.3rem 0; }

/* Breedtebeperking voor tab-inhoud die anders (op een breed scherm) te ver
   uit elkaar getrokken wordt, bv. prospect.php's gegevens-tab. */
.tab-smal { max-width: 42rem; }

/* Succes/fout-meldingen, i.p.v. de tot nu toe herhaalde inline
   style="background:#dff3e9;color:#1e9e6b" (en de rode variant). */
.melding-succes { background: var(--succes-tint); color: var(--succes); padding: 0.6rem 0.85rem; border-radius: 0.5rem; margin-bottom: 1rem; }
.melding-fout { background: var(--danger-tint); color: var(--danger); padding: 0.6rem 0.85rem; border-radius: 0.5rem; margin-bottom: 1rem; }
.melding-waarschuwing { background: var(--waarschuwing-tint); color: var(--waarschuwing); padding: 0.6rem 0.85rem; border-radius: 0.5rem; margin-bottom: 1rem; line-height: 1.5; }

/* Gedeeld formulierveld, i.p.v. de herhaalde inline
   style="width:100%;padding:0.4rem;border:1px solid ...;border-radius:0.4rem". */
.veld { width: 100%; padding: 0.4rem; border: 1px solid var(--rand); border-radius: 0.4rem; }

.tag { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--rand); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.75rem; color: var(--gedempt); white-space: nowrap; }
.tag .vink { color: var(--succes); font-weight: 700; }
/* Kanaal-gekleurde varianten, zelfde kleurenpalet als de kanaal-dots. */
.tag-instagram { background: var(--instagram-tint); color: var(--instagram); border-color: transparent; }
.tag-kaart { background: var(--kaart-tint); color: var(--kaart-kleur); border-color: transparent; }
.tag-email { background: var(--email-tint); color: var(--email); border-color: transparent; }
.tag-facebook { background: var(--facebook-tint); color: var(--facebook); border-color: transparent; }
.tag-telefoon { background: var(--telefoon-tint); color: var(--telefoon); border-color: transparent; }

.badge { border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.75rem; }
.badge-success { background: var(--succes-tint); color: var(--succes); }
.badge-warning { background: var(--waarschuwing-tint); color: var(--waarschuwing); }
.badge-neutral { background: var(--neutraal-tint); color: var(--neutraal); }
.badge-danger { background: var(--danger-tint); color: var(--danger); }
/* Solide (niet-getinte) pil voor een gelogde reactie: zelfde "bevestigd"-
   visuele taal als .check-cirkel hieronder, i.p.v. nog een getinte badge
   die te veel op de statuspillen ernaast zou lijken. */
.badge-dark { background: var(--tekst); color: var(--oppervlak); }

/* Genummerde stap-badge (sequence builder) */
.stap-nummer {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--neutraal-tint);
  color: var(--neutraal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Sequence-builder: stap-kaart met prullenbak-icoon rechtsboven i.p.v. een
   losse "stap verwijderen"-lijst onderaan de pagina. */
.stap-kaart { position: relative; }
.stap-verwijder-icoon {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem;
  color: var(--gedempt);
  display: flex;
}
.stap-verwijder-icoon:hover { color: var(--danger); }

/* Verbindingslijn + wachttijd-stepper tussen 2 stap-kaarten: het getal hier
   is de wachttijd TUSSEN deze en de vorige stap (niet het cumulatieve
   dagnummer, dat blijft als "Dag X" op de kaart zelf staan). */
.stap-verbinding { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0 0.4rem 0.6rem; }
.stap-lijn { width: 1px; height: 1.4rem; background: var(--rand); flex-shrink: 0; }
.stap-verbinding-controle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--gedempt); }
.stap-verbinding-controle label { display: flex; align-items: center; gap: 0.35rem; }
.stap-verbinding-controle input[type="number"] {
  width: 2.75rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--rand);
  border-radius: 0.4rem;
  text-align: center;
  font-size: 0.8rem;
}
.stap-stepper {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--rand);
  background: var(--oppervlak);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--tekst);
}
.stap-stepper:hover { background: var(--achtergrond); }

/* Dashed "volgende stap toevoegen"-vak, met kanaal-pil-knoppen i.p.v. een
   dropdown + los knopje. */
.kanaal-kies-box { border: 1px dashed var(--rand); border-radius: var(--radius); padding: 1rem; margin-top: 0.5rem; }
.kanaal-pil-knop { display: inline-flex; align-items: center; gap: 0.4rem; }
.kanaal-pil-knop .kanaal-dot { margin-top: 0; }

/* Gevulde checkmark-cirkel voor een gekozen variant/concept, i.p.v. alleen
   een andere randkleur */
.check-cirkel {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--tekst);
  color: var(--oppervlak);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
}
.variant-kaart { border: 1px solid var(--rand); }
.variant-kaart.gekozen { border-color: var(--tekst); }

.badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.quote { background: var(--achtergrond); padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-style: italic; margin: 0.5rem 0 0; }

.knop-klein {
  border: 1px solid var(--rand);
  background: var(--oppervlak);
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--tekst);
  margin-top: 0;
}
.knop-klein:hover { background: var(--achtergrond); }
.knop-klein:disabled { opacity: 0.6; cursor: not-allowed; }
.knop-primair { background: var(--sidebar); color: var(--sidebar-tekst); border-color: var(--sidebar); }
.knop-primair:hover { background: var(--sidebar); opacity: 0.9; }
.actief-nav { background: var(--achtergrond); }

.detail-grid { display: grid; grid-template-columns: 1fr 280px; gap: 1.5rem; align-items: start; }
.touch-kaart { display: flex; gap: 0.75rem; align-items: flex-start; }
.touch-kaart.gedimd { opacity: 0.6; }
/* Randkleur geeft in 1 oogopslag aan of, en hoe, een prospect heeft
   gereageerd, zonder de kaart zelf vol te kleuren. */
.touch-kaart.heeft-reactie-positief { border-color: var(--succes); }
.touch-kaart.heeft-reactie-negatief { border-color: var(--danger); }
.touch-kaart.heeft-reactie-vraag { border-color: var(--waarschuwing); }
.kanaal-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; flex-shrink: 0; margin-top: 0.35rem; }
.kanaal-dot-email { background: var(--email); }
.kanaal-dot-kaart { background: var(--kaart-kleur); }
.kanaal-dot-instagram { background: var(--instagram); }
.kanaal-dot-facebook { background: var(--facebook); }
.kanaal-dot-telefoon { background: var(--telefoon); }
.score-groot { font-size: 1.5rem; font-weight: 600; margin: 0.25rem 0; }
.stat-rij { display: flex; justify-content: space-between; margin-top: 0.75rem; text-align: center; }
.stat-rij > div { flex: 1; }
.stat-rij strong { font-size: 1.1rem; }

.kanaal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Kaart blijft na versturen zichtbaar (afgevinkt, groen) i.p.v. meteen te
   verdwijnen: zelfde "bevestigd"-taal als .touch-kaart.heeft-reactie-*. */
.klaarzet-kaart.verzonden { background: var(--succes-tint); border-color: var(--succes); }
details summary { cursor: pointer; font-size: 0.85rem; }
details pre { white-space: pre-wrap; font-family: inherit; background: var(--achtergrond); padding: 0.75rem; border-radius: 0.5rem; font-size: 0.85rem; margin-top: 0.5rem; }

.stat-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin: 1rem 0 1.5rem; }
.stat-tiles .kaart { margin-bottom: 0; }

.balk-rij { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0; font-size: 0.85rem; }
.balk-rij > span:first-child { width: 8rem; flex-shrink: 0; }
.balk-rij > span:last-child { width: 4.5rem; flex-shrink: 0; text-align: right; }
.balk { flex: 1; height: 0.5rem; background: var(--neutraal-tint); border-radius: 999px; overflow: hidden; }
.balk-vulling { height: 100%; border-radius: 999px; }
.balk-groen { background: var(--succes); }
.balk-paars { background: var(--instagram); }
.balk-oranje { background: var(--kaart-kleur); }

/* Checkboxen op stijl van de rest van de app i.p.v. de kale browser-default:
   donkere accentkleur (matcht knop-primair), iets groter, duidelijke
   pointer. accent-color wordt breed ondersteund, geen custom markup nodig. */
input[type="checkbox"] {
  accent-color: var(--tekst);
  width: 1.15rem;
  height: 1.15rem;
  cursor: pointer;
  vertical-align: middle;
}

/* Laadindicator voor acties die even kunnen duren (zoeken/verrijken): een
   simpel draaiend rondje, geen extra afbeeldingen nodig. Donker als default:
   bijna alle plekken waar dit staat (kaarten, knoppen, laad-melding) hebben
   een lichte achtergrond, dus een witte spinner was daar onzichtbaar. Voor
   de zeldzame donkere achtergrond (bv. een knop-primair) gebruik je
   .spinner-licht. */
.spinner {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid rgba(23, 22, 26, 0.2);
  border-top-color: var(--tekst);
  border-radius: 50%;
  animation: spinner-draaien 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 0.4rem;
}
.spinner-licht {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
}
@keyframes spinner-draaien {
  to { transform: rotate(360deg); }
}

/* Swipe-review op copy-generatie.php: "stempel" die tijdens het slepen
   meekleurt (groen vinkje rechts = goedkeuren, rood kruis links = afwijzen),
   en een overlay die zichtbaar maakt dat een afwijzing/herschrijving nog
   bezig is (kan door de LLM-aanroep echt 10-60s duren) i.p.v. dat de kaart
   inactief lijkt terwijl er op de achtergrond nog gewoon iets gebeurt. */
.review-kaart { position: relative; }
.swipe-stempel {
  position: absolute;
  top: 1rem;
  font-size: 1.75rem;
  font-weight: 700;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.05s linear;
}
.swipe-stempel-goed { right: 1rem; color: var(--succes); background: var(--succes-tint); border: 2px solid var(--succes); }
.swipe-stempel-fout { left: 1rem; color: var(--danger); background: var(--danger-tint); border: 2px solid var(--danger); }
.review-kaart-bezig {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: var(--oppervlak);
  border-radius: var(--radius);
  color: var(--gedempt);
  font-size: 0.85rem;
  z-index: 5;
}
.review-kaart-bezig.actief { display: flex; }
.laad-melding {
  display: none;
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--achtergrond);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--gedempt);
}
.laad-melding.actief { display: flex; align-items: center; }

/* Rondleiding-overlay (zie includes/tutorial.php + header.php) */
.tutorial-overlay { position: fixed; inset: 0; background: rgba(26, 25, 23, 0.45); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; padding: 2rem; }
.tutorial-kaart { background: var(--oppervlak); border-radius: var(--radius); padding: 1.5rem; max-width: 26rem; width: 100%; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); }