/* Het aanmeldscherm en zijn twee modi, bovenop de tokens uit app.css.

   Een modus is display:contents en geen eigen doos: de topbar en het grid
   erbinnen blijven daardoor letterlijk de flexkinderen van .work die ze altijd
   waren, zodat een omgeving met één modus exact hetzelfde scherm ziet als
   voor de samenvoeging. Verbergen moet dan wel expliciet, want display:contents
   wint van het hidden-attribuut. */
.mode { display: contents; }
.mode[hidden] { display: none; }

.mode-empty { padding: 24px 20px; color: var(--muted); font-size: 0.9375rem; }

/* De moduskeuze staat er alleen bij meer dan één modus, dus deze strook is
   nooit te zien in een omgeving die maar één manier van starten heeft. De knop
   zelf is .seg uit dashboard.css, dezelfde als op Campagnes: geen tweede
   variant van hetzelfde ding. Alleen de strook eromheen staat hier, in dezelfde
   kleur als de kop eronder zodat het één blok chroom blijft. */
.mode-switch {
  display: flex; align-items: center;
  padding: 12px 32px; border-bottom: 1px solid var(--line); background: var(--panel);
}

/* Het voorbeeld in de templatemodus is een WhatsApp-achtige bubbel: de beller
   beoordeelt de tekst die de klant straks leest, met de variabelen al
   ingevuld terwijl er getypt wordt. */

.label-note { font-weight: 400; color: var(--muted); font-size: 0.8125rem; }

.field-hint { margin-top: 4px; font-size: 0.8125rem; color: var(--muted); }

.preview-empty { padding: 28px 20px; color: var(--muted); font-size: 0.9375rem; text-align: center; }

.preview-bubble {
  margin: 20px;
  padding: 12px 14px;
  max-width: 420px;
  background: #e7ffdb; /* WhatsApp outgoing green, so the preview reads as a message */
  border-radius: 12px 12px 12px 4px;
  font-size: 0.9375rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.preview-bubble .ph {
  background: #fff4ec;
  color: var(--coral-deep);
  border-radius: 5px;
  padding: 0 4px;
  font-weight: 600;
}

.preview-note { margin: 0 20px 20px; font-size: 0.8125rem; color: var(--muted); }

/* De consent-bevestiging: onderdeel van het formulier, geen kleine lettertjes. */
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 16px; font-size: 0.875rem; color: var(--ink); cursor: pointer;
}
.consent input { margin-top: 3px; accent-color: var(--coral); }

/* De ververs-knop naast de template-select, compact als de landcode-prefix.
   send-* zoals alles in deze modus, zodat de knop dezelfde naam heeft in de
   opmaak, de pagina en het script. */
#send-refresh-btn { flex: none; padding: 10px 14px; font-size: 1rem; }
#send-refresh-btn.busy { opacity: 0.5; pointer-events: none; }