/* Vidimus — login.css
 *
 * Dedicated stylesheet voor /login. Bewust LOS van style.css zodat we hier
 * een eigen aesthetiek kunnen voeren (paars + slate-blue) zonder de tokens
 * van de rest van de app (beige/oranje gov-portal) te raken.
 *
 * Design-bron: Leon's ontwerp van 30 april 2026.
 * SVG-paths zijn 1:1 overgenomen uit de React-component VariantC.BgRibbons.
 */

/* ========== Reset (lokaal, login-only) ========== */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #FFFFFF;
  color: #14181F;
  font-size: 14px;
  line-height: 1.5;
}

button { font: inherit; border: none; cursor: pointer; }

a { color: inherit; }

/* ========== Layout — split panel ========== */

.login-root {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(380px, 0.8fr) 1.4fr;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}

/* ========== Auth-paneel (links) ========== */

.login-auth {
  background: #FFFFFF;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px 64px;
  position: relative;
}

.login-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.login-wordmark {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #14181F;
}

.login-center {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.login-form {
  width: 100%;
  max-width: 360px;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.login-form h1 {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: #14181F;
  margin: 0 0 28px;
  line-height: 1.25;
}

.login-field { margin-bottom: 14px; }

.login-input {
  width: 100%;
  padding: 13px 16px;
  background: #FFFFFF;
  border: 1px solid #E0DCD3;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: #14181F;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}

.login-input::placeholder { color: #B8B0A0; }

.login-input:focus {
  border-color: #2A3F66;
  box-shadow: 0 0 0 3px rgba(42, 63, 102, 0.18);
}

.login-input:disabled {
  background: #F8F6F0;
  color: #6A6359;
  cursor: not-allowed;
}

.login-submit {
  width: 100%;
  background: #2A3F66;
  color: #FFFFFF;
  padding: 14px 18px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  transition: filter 150ms, transform 50ms;
}

.login-submit:hover:not(:disabled) { filter: brightness(1.15); }
.login-submit:active:not(:disabled) { transform: translateY(1px); }
.login-submit:disabled { opacity: 0.92; cursor: default; }

.login-submit-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.login-submit-content svg { flex-shrink: 0; }

.login-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  animation: login-spin 900ms linear infinite;
}

@keyframes login-spin {
  to { transform: rotate(360deg); }
}

.login-error {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: #FDF2F2;
  border: 1px solid #F5C2C2;
  color: #8B1F1F;
  font-size: 13px;
  display: none;
}

.login-error.visible { display: block; }

.login-card-foot {
  text-align: center;
  font-size: 11.5px;
  color: #8B8478;
}

/* Centreer de drie auth-blokken (wordmark, form, footer) horizontaal in
 * hun grid-cel: één verticale kolom van max 360px (matcht .login-form
 * max-width), gecentreerd via auto-margins. Tekst binnen elk blok behoudt
 * z'n eigen alignment — h1/input/button blijven links uitgelijnd, footer
 * blijft center via .login-card-foot's text-align.
 */
.login-top, .login-center, .login-card-foot {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* ========== Visual paneel (rechts) ========== */

.login-visual {
  position: relative;
  overflow: hidden;
  background: #0E0A22;
}

.login-visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ========== Mobile (≤ 720px) ==========
 * Visual vult het hele scherm (achtergrond), formulier komt erbovenop
 * in een witte kaart-overlay. Conform Leon's keuze: "Volle beeldachtergrond
 * met formulier-overlay — het paarse beeld vult het hele scherm, formulier
 * in een witte kaart erbovenop."
 */

@media (max-width: 720px) {
  .login-root {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  /* Visual onder de auth-laag — dezelfde grid-cel */
  .login-visual {
    grid-row: 1;
    grid-column: 1;
    z-index: 1;
  }

  /* Auth-laag erbovenop, transparant; de witte kaart erbinnen draagt de fond */
  .login-auth {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    background: transparent;
    padding: 24px;
    align-items: center;
    justify-items: center;
  }

  .login-auth-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 420px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
  }

  .login-form { max-width: none; }
}

/* Op desktop is .login-auth-card slechts een transparante wrapper — geen kaart.
 * grid-row: 1 / -1 laat de card alle drie de rows van .login-auth overspannen
 * zodat zijn eigen auto/1fr/auto-grid de volle container-hoogte krijgt
 * (anders zou de card alleen rij 1 vullen en blijft de 1fr-midden ongebruikt).
 */
@media (min-width: 721px) {
  .login-auth-card {
    background: transparent;
    padding: 0;
    width: 100%;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
}

/* ========== Reduced motion ========== */

@media (prefers-reduced-motion: reduce) {
  .login-spinner { animation: none; }
  .login-submit { transition: none; }
  .login-input { transition: none; }
}