/* =====================================================================
   MEDEWERKERSPORTAAL · AANVULLENDE STIJL
   ---------------------------------------------------------------------
   portal.css komt uit de bouw van de testomgeving en is ongewijzigd
   overgenomen. Wat de productieversie erbij heeft gekregen, staat hier:
   de meldingsbalk, het instelscherm voor tweestapsverificatie, de
   bevestigingsmeldingen en de voettekst.

   Apart bestand en geen wijzigingen in portal.css, zodat een nieuwe
   versie van portal.css er zonder gedoe overheen kan.

   Sinds 24-09-2026 lopen ook de kleuren hier via de tokens in
   btb-basis.css. De eigen terugvalwaarden (`var(--p-rood, #c2452d)`,
   `var(--yellow, #f9e61d)`) zijn weg: de tokens bestaan altijd, dus die
   terugval werd nooit gebruikt, maar suggereerde wel een tweede set
   statuskleuren.
   ===================================================================== */

/* --- Meldingsbalk ---------------------------------------------------
   Verschijnt onderaan als iets niet lukt. Bewust geen alert(): die
   blokkeert de pagina en wordt in sommige browsers onderdrukt. En
   bewust niet vanzelf weg: als het opslaan van een toets mislukt, moet
   dat blijven staan tot iemand het heeft gelezen.

   De balk is in beide weergaven donker, met witte tekst. Een melding
   die boven de pagina zweeft moet zich ervan onderscheiden, en dat doet
   een donkere balk op een lichte pagina net zo goed als op een donkere.
   Daarom hier harde kleuren en geen tokens. */
.p-melding {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 200%);
  max-width: min(46rem, calc(100vw - 2rem));
  padding: 0.95rem 1.3rem;
  background: #1a1a1a;
  color: #fff;
  border-left: 4px solid var(--p-rood);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  line-height: 1.5;
  z-index: 9999;
  transition: transform 0.22s ease;
}
.p-melding.is-zichtbaar { transform: translate(-50%, 0); }

/* --- Losse pagina's: inloggen, wachtwoord, installatie -------------- */
.p-losse-pagina { min-height: 100vh; display: flex; flex-direction: column; }
.p-losse-pagina .mp-wrap { flex: 1; }

.p-voet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  border-top: 1px solid var(--p-line);
  font-size: 0.8rem;
  color: var(--p-tekst-vaag);
  background: var(--p-balk);
}
.p-voet a { color: var(--p-tekst-vaag); text-decoration: none; }
.p-voet a:hover { color: var(--p-accent-tekst); }

/* --- Meldingen in een formulier ------------------------------------ */
/* Deze twee staan alleen op de losse pagina's, en die zijn altijd donker.
   De tinten erachter (12% rood, 12% groen) blijven daarom als rgba(). */
.mp-error.is-zichtbaar {
  padding: 0.7rem 0.9rem;
  background: rgba(194, 69, 45, 0.12);
  border-left: 3px solid var(--p-rood);
  border-radius: 4px;
  margin-bottom: 0.4rem;
}
.mp-goed {
  padding: 0.7rem 0.9rem;
  margin: 0.9rem 0 0.4rem;
  background: rgba(76, 154, 90, 0.12);
  border-left: 3px solid var(--p-groen-diep);
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--p-groen-tekst);
}

/* --- Knop als link -------------------------------------------------- */
.mp-knop {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.85rem 1.4rem;
  background: var(--p-accent);
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.95rem;
}
.mp-knop:hover { filter: brightness(1.05); }

/* --- Code van zes cijfers ------------------------------------------- */
.p-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.6rem !important;
  letter-spacing: 0.5rem;
  text-align: center;
}

/* --- De sleutel voor de authenticator-app --------------------------
   Breekt op elk teken af: een sleutel van 32 tekens moet ook op een
   telefoon leesbaar blijven, en hij wordt overgetypt. */
/* De knop die de authenticator-app opent met het otpauth-adres.
   Staat hier en niet als gewone knop: hij is een link naar een ander
   protocol, en op een computer doet hij niets. Daarom staat de uitleg
   eronder met de sleutel om over te typen als terugval. */
.p-otp-knop {
  display: block;
  margin: 0.7rem 0 0.5rem;
  padding: 0.8rem 1rem;
  background: var(--p-accent);
  color: var(--black);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
}
.p-otp-knop:hover { filter: brightness(1.08); }
.p-otp-uitleg {
  display: block;
  margin: 0.8rem 0 0.2rem;
  font-size: 0.86rem;
  color: var(--p-tekst-vaag);
  line-height: 1.5;
}

/* Doorschijnend zwart achter de sleutel: hij staat alleen op de losse
   pagina's (altijd donker). In de app zet portal.css er via
   `.p-uitnodiging .p-geheim` een token-achtergrond overheen. */
.p-geheim {
  display: block;
  margin: 0.6rem 0;
  padding: 0.7rem 0.9rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--p-line);
  border-radius: 6px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.08rem;
  color: var(--p-accent-tekst);
  word-break: break-all;
  user-select: all;
}

/* --- Genummerde stappen --------------------------------------------- */
.p-stappen {
  margin: 1.1rem 0 1.4rem;
  padding-left: 1.3rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--p-tekst-vaag);
}
.p-stappen li { margin-bottom: 0.7rem; }
.p-stappen li::marker { color: var(--p-accent-tekst); font-weight: 700; }

.p-lijst {
  margin: 0.9rem 0 1.2rem;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--p-tekst-vaag);
}
.p-lijst li { margin-bottom: 0.5rem; }

/* =====================================================================
   CERTIFICERINGSPADEN
   ---------------------------------------------------------------------
   Een pad is een lijst onderdelen waarvan er een paar af zijn. De vorm
   volgt die gedachte: een balk die laat zien hoe ver je bent, en per
   onderdeel wie het afvinkt. Een onderdeel dat nog open staat is een
   open cirkel en geen kruis: er is niets mis, het moet alleen nog.
   ===================================================================== */

.cert-bevoegdheid {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  color: var(--p-tekst-vaag);
}

.cert-balk {
  height: 8px;
  background: var(--p-spoor);
  border-radius: 99px;
  overflow: hidden;
}
.cert-balk-vol {
  height: 100%;
  background: var(--p-accent);
  border-radius: 99px;
  transition: width 0.3s ease;
}
.cert-teller {
  margin: 0.45rem 0 1rem;
  font-size: 0.82rem;
  color: var(--p-tekst-vaag);
}

.cert-opleiding {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--p-tekst-vaag);
}
.cert-opleiding b { color: var(--p-tekst-sterk); }

.cert-lijst { list-style: none; margin: 0; padding: 0; }

.cert-eis {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--p-line);
}
.cert-eis:first-child { border-top: 0; }

.cert-vink,
.cert-open {
  flex: 0 0 auto;
  width: 1.4rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
}
.cert-vink { color: var(--p-groen-diep); }
.cert-open { color: var(--p-tekst-uit); }

.cert-eis-tekst { flex: 1; min-width: 0; }
.cert-eis-tekst b {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
}
.cert-eis.is-gedaan .cert-eis-tekst b { color: var(--p-tekst-vaag); }

.cert-toelichting,
.cert-bron {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--p-tekst-vaag);
}
.cert-toelichting { font-style: italic; }

.cert-knop { flex: 0 0 auto; align-self: center; }

.cert-gesloten {
  padding: 0.85rem 1rem;
  background: var(--p-tint-zacht);
  border-left: 3px solid var(--p-tekst-uit);
  border-radius: 4px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--p-tekst-vaag);
}

/* 12% groen achter 'klaar': op zwart en op wit even goed te lezen. */
.cert-klaar {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(76, 154, 90, 0.12);
  border-left: 3px solid var(--p-groen-diep);
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.6;
}
.cert-klaar .btn { margin-left: 0.5rem; }

.cert-persoon {
  margin: 2rem 0 0.8rem;
  font-family: "SairaSemiCondensed", sans-serif;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--p-accent-lijn);
  padding-bottom: 0.4rem;
}
.cert-persoon-rol {
  float: right;
  font-family: "Poppins", sans-serif;
  text-transform: none;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--p-tekst-vaag);
  letter-spacing: 0;
}

/* --- Een module die nog op slot zit --------------------------------- */
.le-slot {
  opacity: 0.55;
}
.le-slot-reden {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--p-tekst-vaag);
}

/* --- Waarschuwing in een kader -------------------------------------- */
/* 8% geel met een rand van 30% geel: een geel kader dat op zwart en op
   wit hetzelfde zegt. De dikke linkerstreep gaat via het token, zodat
   hij op wit donkerder geel wordt en zichtbaar blijft. */
.p-waarschuwing {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  background: rgba(249, 230, 29, 0.08);
  border: 1px solid rgba(249, 230, 29, 0.3);
  border-left: 4px solid var(--p-accent-lijn);
  border-radius: 6px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--p-tekst-vaag);
}
.p-waarschuwing strong { display: block; color: var(--p-tekst-sterk); margin-bottom: 0.35rem; }