/* Herbruikbare stijl voor veld-validatiemeldingen — vervangt overal de
   standaard browser-tooltip ("Vul dit veld in") door: een koraal omrande
   rand om het ongeldige veld, en direct eronder een regel met een rond
   waarschuwings-icoon + rode tekst die uitlegt wat er mis is. Zie
   /validatie.js voor de JS die de classes hieronder zet/wist.

   Gedeeld bestand op de public/-root, net als /auth-client.js en
   /portaal.css — gebruikt door alle schermen (publieke auth-schermen,
   Bedrijvenportaal én Platformbeheer) zodat een ongeldig veld er overal
   hetzelfde uitziet i.p.v. het per scherm los te bouwen. Linkt dit bestand
   in elk scherm met een <form>.

   Verwacht dat elk veld in een wrapper staat met class "veld" (het
   bestaande patroon in alle drie de stylesheets: portaal.css,
   bedrijvenportaal.css, platformbeheer.css) — validatie.js zoekt die
   wrapper op met closest(".veld") en valt terug op een omringend <label>
   (zoals bedrijvenportaal/agendakoppeling.html's simuleer-form, dat geen
   aparte .veld-div heeft) of anders het direct bovenliggende element. */

.veld-fout-tekst {
  display: none;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #b3261e;
  text-align: left;
}

.veld-fout-tekst svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Brand guide: koraal is de enige accentkleur en kaarten hebben een 1px
   rand zonder schaduw — de ongeldige rand gebruikt dus koraal i.p.v. een
   tweede, nieuwe accentkleur, en er komt geen box-shadow bij. De
   !important is bewust: dit moet de bestaande :focus-/type-selectors in
   portaal.css, bedrijvenportaal.css en platformbeheer.css betrouwbaar
   overstemmen, ook al verschilt de specificiteit daar net iets per
   stylesheet. */
.veld-ongeldig input,
.veld-ongeldig select,
.veld-ongeldig textarea {
  border-color: #ff6b4a !important;
}

/* Een eigen tekstweergave die een native input[type=date]/[type=time]
   visueel vervangt (zie .datum-tijd-weergave in bedrijvenportaal.css) ligt
   zélf ondoorzichtig boven het (dan onzichtbare, opacity:0) native veld —
   de regel hierboven zet de rode rand dus op een element dat niemand ziet.
   Deze regel herhaalt 'm op de zichtbare overlay. */
.veld-ongeldig .datum-tijd-weergave {
  border-color: #ff6b4a !important;
}

.veld-ongeldig .veld-fout-tekst {
  display: flex;
}