/* ============================================
   Onboarding: lege staten, voorbeeld, rondleiding
   Geen kleurwaarden. Alles uit de tokenlaag in style.css.
   ============================================ */

.lege-staat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
}

.lege-staat-kop {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--text-secondary);
}

.lege-staat-uitleg {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-tertiary);
  max-width: 46ch;
}

.lege-staat-actie {
  margin-top: var(--space-xs);
}

/* Het voorbeeld moet op afstand al anders lezen dan echte data. */
.voorbeeld-merk {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* --text-tertiary haalt hier maar 3.91:1, onder de 4.5:1-norm voor tekst
     op deze grootte. Dit label (samen met .voorbeeld-onderschrift) is het
     enige leesbare signaal dat dit geen echte cijfers zijn, dus moet het
     die norm zelf halen. --text-secondary haalt 7.96:1. */
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-xs);
}

/* Het dimmen landt op de inhoud, niet op de hele kaart. Op .chart-card zelf
   (dus ook op de kop en het "Voorbeeld"-label) gemeten contrast was 1.95:1,
   praktisch onleesbaar; de grafiek eronder mag gedempt zijn, de kop en het
   label moeten het enige leesbare signaal blijven dat dit geen echte cijfers
   zijn. */
.is-voorbeeld .chart-container,
.is-voorbeeld .cat-bar-list,
.is-voorbeeld .chatbot-list {
  opacity: 0.55;
  filter: saturate(0.5);
  pointer-events: none;
}

/* De meldingsbalk boven Rapportages tijdens de rondleiding. Daar is de HELE
   pagina in een keer verzonnen (rapport-voorbeeld.js), dus staat de melding
   een keer bovenaan in plaats van als merk per kaart, zoals op het Dashboard. */
.rf-voorbeeld {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Klikken werkt niet zolang het voorbeeld staat. Een klik op een facet of een
   pil roept RP_FILTER.laad() aan; die haalt de echte (lege) cijfers op en zet
   ze onder een balk die "Voorbeeld" blijft zeggen. Dan labelt het scherm
   echte data als verzonnen, precies andersom als de bedoeling. De kaarten
   zelf staan al op pointer-events: none via .is-voorbeeld hierboven. */
#page-rapportages.is-voorbeeld .rf-bar,
#page-rapportages.is-voorbeeld .kpi-grid {
  pointer-events: none;
}

.voorbeeld-onderschrift {
  margin: var(--space-sm) 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}


/* Eén ding tegelijk gemarkeerd. Een ring in plaats van een achtergrond, zodat
   het element eronder leesbaar blijft: het is de les, niet de decoratie.
   box-shadow, niet outline: onderzocht als alternatief omdat twee haltes
   (chatbots/tiers, detectieregels/regels) binnen een modal verankeren en
   .modal daar overflow-y: auto heeft (components.css); box-shadow en outline
   liggen allebei buiten de border-box en worden als ink-overflow door zo'n
   voorouder identiek geclipt zodra het doel na scrollIntoView vlak tegen die
   rand komt te staan (apart geverifieerd: een geïsoleerde reproductie met
   beide varianten toont exact dezelfde clip). Overstappen naar outline lost
   het dus niet op en kost wel het tweetonige effect (zachte halo +
   scherpe lijn) dat box-shadow met twee lagen kan en outline niet. Zie
   task-4-report.md voor de volledige afweging inclusief de reken- en
   schermgrootte die nodig is om het in de praktijk te raken. */
.rondleiding-doel {
  position: relative;
  z-index: 901;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 0 0 5px var(--brand-primary);
}

.rondleiding-welkom {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  color: var(--text-primary);
  max-width: 440px;
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.rondleiding-welkom h2 {
  margin: 0 0 var(--space-sm);
  font-size: 1.1rem;
  font-weight: 600;
}

.rondleiding-welkom p {
  margin: 0 0 var(--space-lg);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.rondleiding-bubbel {
  position: fixed;
  /* De positie wordt in rondleiding.js (_plaats) berekend uit de rect van
     het anker van de halte, niet hier hardgecodeerd. Halte 5 en 7 verankeren
     in een modal-overlay (1000, met backdrop-filter): zonder deze bubbel
     boven die laag was hij daar onleesbaar en onklikbaar (fixronde 1, C1).
     Escape sluit zo'n modal netjes zonder de rondleiding te stoppen, maar
     dat is een scriptvolgorde-kwestie in rondleiding.js (initToetsen, de
     capture-fase-listener, fixronde 2 punt 2), geen z-index-kwestie. De
     toast (10000) blijft met opzet boven de bubbel; .cg-dropdown (9999,
     chatbots.css) is op dit moment dode CSS zonder enige aanroep in de JS
     (fixronde 2, punt 4), dus die twee botsen vandaag nergens echt, maar de
     marge houdt de bubbel toch onder de toast mocht dat ooit veranderen. */
  z-index: 1001;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
}

/* De pijl wijst altijd naar het doel, nooit alleen maar naar de kant waar de
   bubbel toevallig staat. `data-pijl` komt uit rondleiding.js (_plaats) en
   kent vier waarden: 'links'/'rechts' (bubbel naast het doel), 'boven' (doel
   staat onder de bubbel, pijl wijst omlaag) en 'onder' (doel staat boven de
   bubbel, pijl wijst omhoog) - die laatste is de tak die _plaats gebruikt om
   overlap met het doel te voorkomen wanneer links/rechts/boven geen van
   drieën genoeg ruimte hebben, en wordt in de praktijk dus geraakt. */
.rondleiding-bubbel::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  transform: rotate(45deg);
}
.rondleiding-bubbel[data-pijl="links"]::after {
  left: -7px; top: 22px; border-right: none; border-top: none;
}
.rondleiding-bubbel[data-pijl="rechts"]::after {
  right: -7px; top: 22px; border-left: none; border-bottom: none;
}
.rondleiding-bubbel[data-pijl="boven"]::after {
  top: -7px; left: 22px; border-right: none; border-bottom: none;
}
.rondleiding-bubbel[data-pijl="onder"]::after {
  bottom: -7px; left: 22px; border-left: none; border-top: none;
}

.rondleiding-teller {
  margin: 0 0 var(--space-xs);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.rondleiding-kop {
  margin: 0 0 var(--space-xs);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rondleiding-uitleg {
  margin: 0 0 var(--space-md);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.rondleiding-knoppen {
  display: flex;
  gap: var(--space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .rondleiding-bubbel, .rondleiding-welkom { transition: none; animation: none; }
}

.user-tour-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  color: var(--text-tertiary);
  cursor: pointer;
  text-decoration: underline;
}

.user-tour-btn:hover { color: var(--text-secondary); }