/* ==========================================================================
   Het inlogscherm.

   Links een beeld, rechts het formulier. De maten komen een op een van
   websignaal.nl, dat dit scherm sinds augustus 2026 als eigen override had:
   scherpe hoeken op de velden en de knop, alleen het beeldvlak rond, en een
   donkergrijze knop in plaats van een gekleurde.

   Wat hier opgemaakt wordt komt uit twee bronnen. De omlijsting (.login-page,
   .container, .login-page-title) komt uit de inlogpagina van Concrete zelf en
   wordt hier vooral geneutraliseerd. Het formulier erbinnen is dat van
   wsc_core, dat het pakket naar application/ schrijft; dat levert de labels al
   boven de velden en "ingelogd blijven" naast "wachtwoord vergeten".

   Er wordt geen Bootstrap geladen, dus de rasterklassen (row, col-sm-3) doen
   niets. Mocht het formulier van de kern toch gebruikt worden, dan vangen de
   regels onder "terugval" dat op.
   ========================================================================== */

:root {
  /* De accentkleur van de klant, met de waarden van websignaal.nl als
     terugval. Zonder ingestelde kleur ziet het scherm er dus uit zoals het
     ontwerp bedoeld is, en met een kleur kleuren de links en de focusrand mee. */
  --wsc-l-accent: var(--wsc-huisstijl-accent, #2563eb);
  --wsc-l-accent-h: var(--wsc-huisstijl-accent-h, #3b82f6);
  /* De focusrand volgt de accentkleur, maar valt zonder ingestelde kleur terug
     op grijs en niet op blauw: een veld dat de aandacht heeft hoort niet als
     een link te kleuren. */
  --wsc-l-focus: var(--wsc-huisstijl-accent, #6b7280);
  --wsc-l-ink: #111827;
  --wsc-l-ink-2: #374151;
  --wsc-l-ink-3: #4b5563;
  --wsc-l-ink-4: #9ca3af;
  --wsc-l-line: #d1d5db;
  --wsc-l-knop: #1f2937;
  --wsc-l-knop-h: #374151;

  /* Lucide eye en eye-off (ISC), voor de oogknop van het kernformulier. Ons
     eigen formulier heeft ze inline staan. */
  --wsc-l-oog: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --wsc-l-oog-dicht: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body.wsc-login {
  margin: 0;
  background: #fff;
  color: var(--wsc-l-ink-2);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wsc-login__vlak {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
}

/* ---------- links: het beeld --------------------------------------------
   Verdwijnt op een smal scherm: daar is een halve pagina sfeerbeeld alleen
   maar in de weg. Vandaar dat het vlak pas vanaf 1024px meedoet. */
.wsc-login__beeld { display: none; }

@media (min-width: 1024px) {
  .wsc-login__beeld {
    display: block;
    position: relative;
    flex: 0 0 50%;
    margin: 16px;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  /* De sluier houdt het beeld rustig en zorgt dat het logo linksonder
     leesbaar blijft, ook op een foto met een lichte lucht erin. */
  .wsc-login__sluier {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
  }
  .wsc-login__beeld-logo {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 1;
    height: 40px;
    width: auto;
  }
}

@media (min-width: 1280px) {
  .wsc-login__beeld {
    flex: 0 0 66.6667%;
    /* Het beeld mag tweederde nemen, maar niet ten koste van het paneel. Zonder
       deze grens wordt het paneel bij 1280px juist smaller dan bij 1180px, en
       dan vallen "ingelogd blijven" en "wachtwoord vergeten" over twee regels.
       528px is de inhoud (400) plus de padding op deze breedte (2 x 64). */
    max-width: calc(100% - 528px);
  }
  .wsc-login__beeld-logo { left: 32px; bottom: 32px; height: 48px; }
}

/* ---------- rechts: het paneel ------------------------------------------ */
.wsc-login__paneel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 32px 16px 12px;
}
@media (min-width: 640px)  { .wsc-login__paneel { padding: 32px 32px 16px; } }
@media (min-width: 768px)  { .wsc-login__paneel { padding: 32px 48px 16px; } }
@media (min-width: 1280px) { .wsc-login__paneel { padding: 32px 64px 16px; } }

.wsc-login__inhoud {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* Het merk: het logo uit Huisstijl, of de naam van de site in letters. */
.wsc-login__merk { text-align: center; }
.wsc-login__merk img {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 auto 24px;
}
@media (min-width: 640px) { .wsc-login__merk img { height: 72px; margin-bottom: 32px; } }
@media (min-width: 768px) { .wsc-login__merk img { height: 80px; } }

.wsc-login__naam {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--wsc-l-ink);
  text-align: center;
}
@media (min-width: 640px) { .wsc-login__naam { font-size: 28px; margin-bottom: 32px; } }
@media (min-width: 1024px) { .wsc-login__naam { text-align: left; } }

.wsc-login__kop {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--wsc-l-ink);
  text-align: center;
}
@media (min-width: 640px) { .wsc-login__kop { font-size: 24px; } }

.wsc-login__onderkop {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--wsc-l-ink-3);
  text-align: center;
}
@media (min-width: 1024px) {
  .wsc-login__kop,
  .wsc-login__onderkop { text-align: left; }
}

.wsc-login__vak { margin-top: 24px; }
.wsc-login__terug { margin: 20px 0 0; text-align: center; }

.wsc-login__voet {
  flex: 0 0 auto;
  padding: 12px 0;
  text-align: center;
  font-size: 12px;
  color: var(--wsc-l-ink-4);
}
@media (min-width: 640px) { .wsc-login__voet { font-size: 14px; padding: 16px 0; } }
.wsc-login__voet a { color: var(--wsc-l-ink-4); text-decoration: none; }
.wsc-login__voet a:hover { color: var(--wsc-l-ink-3); }
.wsc-login__voet p { margin: 8px 0 0; }

/* ---------- de omlijsting van Concrete ----------------------------------
   De inlogpagina van de kern brengt zijn eigen container en kop mee. Die kop
   zegt "Sign in to <naam>", en met het merk er al boven staat de naam dan
   twee keer op een half scherm.

   Alleen de kop verbergen en niet de hele header: in diezelfde header zit de
   area Disclaimer, waar een beheerder een mededeling voor zijn medewerkers in
   kan zetten. Die moet zichtbaar blijven. */
.wsc-login .login-page-title { display: none; }
/* De lege rij waar de kop in zat, zodat er geen gat boven het formulier valt. */
.wsc-login .login-page-header .row:not(.login-page-disclaimer-area):empty { display: none; }

.wsc-login .login-page .container { width: auto; max-width: none; padding: 0; margin: 0; }
.wsc-login .login-page .row { display: block; margin: 0; }
.wsc-login .login-page [class*="col-"] { width: 100%; max-width: none; padding: 0; }

/* De mededeling uit de area Disclaimer. Deze regel hoort ná die hierboven:
   de area draagt zelf de klasse "row", en die zet de marge anders weer op nul. */
.wsc-login .login-page .login-page-disclaimer-area {
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--wsc-l-ink-3);
}
.wsc-login .login-page .login-page-disclaimer-area p:last-child { margin-bottom: 0; }

/* Meerdere inlogmethodes onder elkaar, met een streep ertussen. */
.wsc-login .authentication-type + .authentication-type { margin-top: 24px; }

/* ---------- de velden ---------------------------------------------------- */
.wsc-login .form-label,
.wsc-login .col-form-label {
  display: block;
  width: 100%;
  max-width: none;
  flex: none;
  padding: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--wsc-l-ink-2);
  text-align: left;
}
.wsc-login .mb-3 { margin-bottom: 24px; }
.wsc-login .form-group { margin-bottom: 24px; }

.wsc-login .form-control,
.wsc-login .form-select {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wsc-l-ink);
  background: #fff;
  border: 1px solid var(--wsc-l-line);
  border-radius: 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  appearance: none;
}
.wsc-login .form-control::placeholder { color: var(--wsc-l-ink-4); }
/* De focus mag subtiel zijn maar moet wel te zien zijn, ook voor wie met het
   toetsenbord werkt. Vandaar naast de donkere rand een lichte ring. */
.wsc-login .form-control:focus,
.wsc-login .form-select:focus {
  outline: none;
  border-color: var(--wsc-l-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wsc-l-focus) 18%, transparent);
}

/* De knop om het wachtwoord te tonen, in het veld. */
.wsc-login__wachtwoord { position: relative; }
.wsc-login__wachtwoord .form-control { padding-right: 42px; }

.wsc-login__oog {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  color: var(--wsc-l-ink-4);
  background: none;
  border: 0;
  cursor: pointer;
}
.wsc-login__oog:hover { color: var(--wsc-l-ink-2); }
.wsc-login__oog:focus-visible {
  outline: 2px solid var(--wsc-l-focus);
  outline-offset: -2px;
}
.wsc-login__oog svg { display: block; width: 18px; height: 18px; }
/* Zonder deze regel blijft een <svg hidden> in beeld: het display van de
   stylesheet hierboven wint anders van het hidden-attribuut. */
.wsc-login__oog svg[hidden] { display: none; }

/* "Ingelogd blijven" en "Wachtwoord vergeten?" op één regel. */
.wsc-login__regel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.wsc-login .form-check { padding-left: 1.6em; }
.wsc-login .form-check-input {
  width: 16px;
  height: 16px;
  margin-left: -1.6em;
  border: 1px solid var(--wsc-l-line);
  border-radius: 0;
}
.wsc-login .form-check-input:checked {
  background-color: var(--wsc-l-knop);
  border-color: var(--wsc-l-knop);
}
.wsc-login .form-check-input:focus { box-shadow: none; border-color: #6b7280; }
.wsc-login .form-check-label { font-size: 14px; font-weight: 400; color: var(--wsc-l-ink-2); }

/* ---------- knoppen en links --------------------------------------------- */
.wsc-login .btn {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .15s ease;
}
.wsc-login .btn-primary {
  color: #fff;
  background: var(--wsc-l-knop);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.wsc-login .btn-primary:hover,
.wsc-login .btn-primary:focus { background: var(--wsc-l-knop-h); color: #fff; }

.wsc-login .btn-secondary,
.wsc-login .btn-outline-secondary {
  margin-top: 12px;
  color: var(--wsc-l-ink-2);
  background: #fff;
  border: 1px solid var(--wsc-l-line);
}
.wsc-login .btn-secondary:hover,
.wsc-login .btn-outline-secondary:hover { background: #f9fafb; color: var(--wsc-l-ink); }

.wsc-login .btn-link,
.wsc-login a.btn-link {
  display: inline;
  width: auto;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--wsc-l-accent);
  text-decoration: none;
}
.wsc-login .btn-link:hover { color: var(--wsc-l-accent-h); }

.wsc-login hr { margin: 24px 0; border: 0; border-top: 1px solid #e5e7eb; opacity: 1; }
.wsc-login .sign-up-container { font-size: 14px; color: var(--wsc-l-ink-3); text-align: center; }

/* ---------- meldingen ---------------------------------------------------- */
.wsc-login .alert {
  padding: 16px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  margin-bottom: 18px;
}
.wsc-login .alert-danger,
.wsc-login .alert-error { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.wsc-login .alert-success { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.wsc-login .alert-info { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }

/* De schermen voor een vergeten wachtwoord brengen hun eigen kop mee, in een
   h4. Die krijgt dezelfde opmaak als onze eigen kop. */
.wsc-login .wsc-login__vak h4 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
  color: var(--wsc-l-ink);
}
@media (min-width: 640px) { .wsc-login .wsc-login__vak h4 { font-size: 24px; } }

.wsc-login .help-block,
.wsc-login .ccm-message {
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--wsc-l-ink-3);
}
.wsc-login .ccm-message:empty { margin: 0; }

/* ---------- terugval ----------------------------------------------------
   Als een site het formulier van de kern gebruikt in plaats van dat van ons
   (bijvoorbeeld doordat er al een eigen override in application/ stond), dan
   zet dit de twee dingen recht die daar anders uit de band springen: het losse
   label boven het vinkje, en de knopvolgorde met de uitgang boven de
   hoofdactie. En de oogknop van de kern: die toont een Font Awesome-icoon dat
   hier niet laadt, dus hij krijgt hetzelfde oog als het onze. De knop blijft zo
   werken in plaats van een leeg grijs vlak te zijn. */
.wsc-login .concrete-login-form .col-form-label.pt-0 { display: none; }
.wsc-login .concrete-login-form .text-end:has(.btn-primary) {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
.wsc-login .concrete-login-form .text-end:has(.btn-link) { text-align: right; }

.wsc-login .input-group { display: flex; align-items: stretch; }
.wsc-login .input-group .form-control { flex: 1 1 auto; }
.wsc-login #toggle-password-visibility {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  color: var(--wsc-l-ink-4);
  background: #fff;
  border: 1px solid var(--wsc-l-line);
  border-left: 0;
  cursor: pointer;
}
.wsc-login #toggle-password-visibility:hover { color: var(--wsc-l-ink-2); }
/* Het lege <i> van Font Awesome krijgt het oog als masker, zodat het de
   tekstkleur volgt. Lucide eye.svg, dezelfde die ons eigen formulier inline
   meeneemt. */
.wsc-login #toggle-password-visibility i {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--wsc-l-oog) center / contain no-repeat;
  mask: var(--wsc-l-oog) center / contain no-repeat;
}
.wsc-login #toggle-password-visibility i.fa-eye-slash { --wsc-l-oog: var(--wsc-l-oog-dicht); }