/* Inlogpagina. Zelfde tokens als app.css; die wordt hiervoor ingeladen.
   Twee panelen: links de foto met een S-curve als goot van een waterattractie, rechts
   het formulier. Op telefoon wordt de foto een band bovenaan. */

/* De formulierkant is wit, niet de lichtblauwe grond van de rest van de app. De
   curve tussen de twee panelen moet dezelfde kleur hebben, anders zie je een randje.
   In dark mode wordt het de donkere oppervlakkleur; puur wit zou daar hinderlijk zijn. */
:root { --login-pane: #FFFFFF; }

:root[data-theme="dark"] { --login-pane: var(--surface); }

.login-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- beeldpaneel ---------- */

.login-visual {
  position: relative;
  overflow: hidden;
  background: var(--brand-deep);
}

.login-visual .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

/* Donker waar de tekst staat (bovenin), lichter naar onderen zodat de foto
   zichtbaar blijft. */
.login-visual .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg,
    rgba(7, 22, 32, .90) 0%,
    rgba(9, 46, 84, .72) 42%,
    rgba(9, 46, 84, .40) 100%);
}

.login-visual-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(24px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(22px, 3.5vh, 40px);
}

/* Het logo staat boven Inloggen op de witte kant, ruim in beeld. Groot genoeg dat de
   naam eronder leesbaar is: op 74 px waren die letters een paar pixels hoog en viel
   alleen het cyaan woord op. */
.login-logo {
  display: block;
  line-height: 0;
  margin-bottom: 22px;
}

.login-logo img {
  height: clamp(120px, 15vw, 172px);
  width: auto;
  display: block;
}

.login-intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Zelfde maat als de instructie bij het formulier (16px, de bodymaat), maar in
   een lichtere kleur zodat de kop erboven de kop blijft. */
.login-claim-sub {
  margin: 0;
  max-width: 48ch;
  color: rgba(255, 255, 255, .82);
  font-size: 16px;
  line-height: 1.55;
}

.login-claim {
  margin: 0;
  font-family: "Libre Franklin", "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.14;
  letter-spacing: -.012em;
  color: #FFFFFF;
  text-wrap: balance;
  max-width: 20ch;
}

/* de curve: profiel van een goot die in het formulierpaneel bijt */
.login-curve { position: absolute; z-index: 3; pointer-events: none; }
.login-curve path { fill: var(--login-pane); }

.login-curve-v { top: 0; right: -1px; height: 100%; width: clamp(38px, 5.5vw, 88px); }
.login-curve-h { display: none; left: 0; bottom: -1px; width: 100%; height: clamp(26px, 6vw, 44px); }

/* ---------- formulierpaneel ---------- */

.login-pane {
  background: var(--login-pane);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 56px);
}

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

.login-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.login-rule { width: 44px; height: 4px; border-radius: 2px; background: var(--accent); }

.login-card h1 {
  margin: 14px 0 6px;
  font-size: clamp(24px, 2.3vw, 31px);
}

.login-card .lede { margin: 0; max-width: 34ch; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 86px; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--brand);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.pw-toggle:hover { background: rgba(0, 0, 0, .05); }

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
}

.login-stay { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.login-stay input { width: 19px; height: 19px; accent-color: var(--brand); margin: 0; }

.login-card footer { margin: 0; color: var(--ink-soft); font-size: 13px; }

.login-legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.6;
}

.login-legal p { margin: 0; }
.login-legal .company { font-weight: 600; color: var(--ink); }

.login-legal .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-variant-numeric: tabular-nums;
}

.login-legal .restricted { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }

.login-legal .restricted::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; min-height: 0; }
  .login-visual { min-height: 40vh; }
  .login-visual-inner { padding-bottom: clamp(40px, 8vw, 60px); }
  .login-curve-v { display: none; }
  .login-curve-h { display: block; }
  .login-pane { padding-top: clamp(26px, 6vw, 40px); padding-bottom: clamp(40px, 10vw, 64px); }
  .login-card { max-width: 460px; }
}

@media (max-width: 560px) {
  .login-visual { min-height: 34vh; }
}