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

   Links een beeld, rechts het formulier. Het formulier zelf komt ongewijzigd
   uit Concrete, dus alles hieronder stuurt de klassen van de kern aan:
   .login-page, .concrete-login-form, .form-control, .btn. Er wordt niets van
   Bootstrap geladen, dus de rasterklassen (row, col-sm-3) doen niets en de
   labels komen vanzelf boven de velden te staan. Dat is precies wat we willen.
   ========================================================================== */

:root {
  --wsc-l-accent: var(--wsc-huisstijl-accent, #1f6f4a);
  --wsc-l-accent-h: var(--wsc-huisstijl-accent-h, #1a5c3d);
  --wsc-l-ink: #111827;
  --wsc-l-ink-2: #4b5563;
  --wsc-l-ink-3: #9ca3af;
  --wsc-l-line: #d1d5db;
  --wsc-l-veld: #ffffff;
}

* { box-sizing: border-box; }

body.wsc-login {
  margin: 0;
  background: #fff;
  color: var(--wsc-l-ink);
  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 -------------------------------------------- */
.wsc-login__beeld {
  position: relative;
  flex: 1 1 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Geen foto ingesteld? Dan een verloop in de accentkleur van de klant. Dat
     is nog altijd zijn kleur, en beter dan een grijs vlak. */
  background-color: var(--wsc-l-accent);
  /* Een ingestelde foto komt als inline background-image binnen en wint van
     dit verloop; er is geen extra laag voor nodig. */
  background-image: linear-gradient(150deg, var(--wsc-l-accent) 0%, var(--wsc-l-accent-h) 100%);
}
/* 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: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .30) 45%, rgba(0, 0, 0, .58) 100%);
}
.wsc-login__beeld-logo {
  position: absolute;
  left: clamp(24px, 3vw, 40px);
  bottom: clamp(24px, 3vw, 40px);
  height: clamp(34px, 3.4vw, 48px);
  width: auto;
  /* Een logo in de huisstijl is meestal donker; op een foto met sluier moet
     het licht zijn. Een filter is hier eerlijker dan een tweede bestand. */
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* ---------- rechts: het paneel ------------------------------------------ */
.wsc-login__paneel {
  flex: 0 0 clamp(380px, 34vw, 520px);
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  z-index: 1;
}
.wsc-login__inhoud {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 3.5vw, 56px);
}

.wsc-login__merk { text-align: center; margin-bottom: clamp(22px, 3vw, 34px); }
.wsc-login__merk img { height: clamp(40px, 4vw, 54px); width: auto; }
.wsc-login__naam {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--wsc-l-ink);
}

.wsc-login__voet {
  padding: 18px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--wsc-l-ink-3);
}

.wsc-login__kop {
  margin: 0 0 22px;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 600;
  text-align: center;
  color: var(--wsc-l-ink);
}

/* ---------- het formulier van Concrete ---------------------------------- */
/* "Sign in to <naam>" verbergen: het merk staat er al boven, en dan staat de
   naam twee keer op een half scherm. In het scherm waar je verplichte velden
   moet invullen is die kop leeg, dus daar valt niets weg. */
.wsc-login .login-page-title { display: none; }

/* Concrete zet boven het vinkje nog een los label "Remember Me", terwijl het
   vinkje zelf al zegt wat het doet. Eén van de twee is genoeg. */
.wsc-login .concrete-login-form .col-form-label.pt-0 { display: none; }

.wsc-login .concrete-login-form label,
.wsc-login .col-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--wsc-l-ink-2);
  margin-bottom: 6px;
}
.wsc-login .concrete-login-form .mb-3 { margin-bottom: 18px; }

.wsc-login .form-control {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--wsc-l-ink);
  background: var(--wsc-l-veld);
  border: 1px solid var(--wsc-l-line);
  border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wsc-login .form-control:focus {
  outline: none;
  border-color: var(--wsc-l-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wsc-l-accent) 18%, transparent);
}

/* "Onthoud mij" en "Wachtwoord vergeten" naast elkaar, zoals in de CRM. */
.wsc-login .form-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--wsc-l-ink-2);
}
.wsc-login .form-check-input { width: 16px; height: 16px; margin: 0; flex: none; }
.wsc-login .form-check-label { margin: 0; font-weight: 400; }

.wsc-login .text-end { text-align: right; }
.wsc-login .btn-link {
  font-size: 14px; font-weight: 600;
  color: var(--wsc-l-accent);
  text-decoration: none;
}
.wsc-login .btn-link:hover { text-decoration: underline; }

.wsc-login .btn {
  display: inline-block;
  padding: 11px 18px;
  font: inherit;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
/* Inloggen boven, annuleren eronder. In de broncode staan ze andersom, en dan
   staat de uitgang boven de hoofdactie. Kolom-omgekeerd zet dat recht zonder
   aan het formulier van Concrete te komen.
   Alleen de regel mét de inlogknop: "Wachtwoord vergeten" zit in een blok met
   dezelfde klasse en hoort gewoon rechts uitgelijnd te blijven. */
.wsc-login .concrete-login-form .text-end:has(.btn-primary) {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  text-align: center;
}
/* De inlogknop over de volle breedte: het is de enige actie op dit scherm. */
.wsc-login .btn-primary {
  display: block; width: 100%;
  background: var(--wsc-l-ink); color: #fff;
}
.wsc-login .btn-primary:hover { background: #374151; }
/* Annuleren is geen tweede knop maar een uitweg: als tekst, niet als vlak. */
.wsc-login .btn-secondary {
  background: none; border-color: transparent;
  color: var(--wsc-l-ink-3);
  font-weight: 400; font-size: 14px;
  padding: 4px;
}
.wsc-login .btn-secondary:hover { color: var(--wsc-l-ink-2); text-decoration: underline; }

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

/* Meldingen van Concrete. */
.wsc-login .alert {
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.wsc-login .alert-danger,
.wsc-login .alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.wsc-login .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.wsc-login .alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* ---------- smaller scherm ---------------------------------------------- */
@media (max-width: 900px) {
  /* Het beeld gaat achter het paneel liggen in plaats van ernaast, met een
     witte waas erover zodat de tekst leesbaar blijft. */
  .wsc-login__vlak { display: block; position: relative; }
  .wsc-login__beeld {
    position: fixed; inset: 0; z-index: 0;
  }
  .wsc-login__beeld-logo { display: none; }
  .wsc-login__sluier { background: rgba(255, 255, 255, .94); }
  .wsc-login__paneel {
    flex: none;
    min-height: 100vh; min-height: 100svh;
    background: transparent;
  }
  .wsc-login__inhoud { background: transparent; }
}