/**
 * Loginpagina (split desktop / formulier gecentreerd)
 * Tokens: var(--gray-*), var(--layout-padding-x), design system
 */

/* ── Pagina: witte volledige achtergrond, geen tweede toon (formulierzijde) ──
 *
 * `style.css` zet `html` op `background: var(--theme-background)` (lichtgrijs) en
 * `min-height: 100vh` (grote iOS-viewport). Daardoor: grijze strook onderaan
 * bij korte scroll, of wanneer body/html nét niet gelijk oplopen. html + body
 * hier gelijk trekken (wit + 100svh/100dvh). */
html.ds-login-page-html,
html:has(body.ds-login-page) {
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--surface-white, #ffffff);
}

body.ds-login-page {
  height: 100%;
}

body.ds-login-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  /* Geen overflow-y: hidden — content mag groeien; bij te veel hoogte scrolt de
   * pagina normaal (alleen wanneer nodig). */
  background: var(--surface-white, #ffffff);
  color: var(--foreground);
  display: block;
  padding: 0;
}

/* Shell: op desktop naast elkaar; op <1024px alleen formulierzijde */
.ds-login-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

@media (min-width: 1024px) {
  .ds-login-shell {
    flex-direction: row;
    align-items: stretch;
  }
}

/* Linkerkolom: placeholdervlak (grijs), alleen ≥1024px.
 *
 * Layout-strategie (≥1024px):
 *   De aside wordt ABSOLUUT gepositioneerd aan de linkerkant van de shell.
 *   `.ds-login-main` krijgt vervolgens 100% van de viewport-breedte, waardoor
 *   het formulier (max-width: 400px, gecentreerd via flex) exact in het
 *   midden van de viewport staat — onafhankelijk van de aside-breedte.
 *
 * Aside-breedte: `clamp(240px, 25vw, 480px)`
 *   - 240px minimum: aside blijft visueel substantieel op smalle laptops.
 *   - 25vw groei: schaalt mee met grotere schermen.
 *   - 480px maximum: voorkomt dat aside ooit het formulier overlapt.
 *
 * Niet-overlap garantie: aside-right < form-left
 *   form-left = (vw − 400) / 2
 *   - 1024px: aside=256, form-left=312 → 56px speling
 *   - 1280px: aside=320, form-left=440 → 120px speling
 *   - 1440px: aside=360, form-left=520 → 160px speling
 *   - 1920px: aside=480, form-left=760 → 280px speling
 */
.ds-login-aside {
  display: none;
  flex: 0 0 36%;
  max-width: 480px;
  min-height: 0;
}

/* Placeholder tot edge; egaal grijs; later te vervangen door afbeelding */
.ds-login-aside-placeholder {
  flex: 1 1 auto;
  min-height: 100%;
  width: 100%;
  background: var(--gray-200);
}

/* Rechterkolom: wit, formulier verticaal gecentreerd */
.ds-login-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  /* layout-padding: 16 / 24 / 32 (tokens) */
  padding: calc(24px + env(safe-area-inset-top, 0px)) var(--layout-padding-x, 16px)
    calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .ds-login-main {
    padding-left: var(--layout-padding-x, 24px);
    padding-right: var(--layout-padding-x, 24px);
  }
}

@media (min-width: 1024px) {
  /* Shell wordt block + relative zodat de aside absoluut kan worden
   * gepositioneerd zonder de flex-doorstroom van main te beïnvloeden.
   * De form binnen main centreert dan in de hele viewport. */
  .ds-login-shell {
    position: relative;
    display: block;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .ds-login-aside {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: clamp(240px, 25vw, 480px);
    max-width: none;
    flex: none;
  }

  .ds-login-main {
    flex: none;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding-left: var(--layout-padding-x, 32px);
    padding-right: var(--layout-padding-x, 32px);
  }
}

/* Iets compacter op smal zodat loginblok vaker in één viewport past */
@media (max-width: 639px) {
  .ds-login-main {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

.ds-login-main-inner {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Logo → titel: 8×8px; kortere viewports: 7×8 / 6×8 zodat scroll alleen wanneer echt nodig is */
.ds-login-logo {
  margin-bottom: 64px;
  text-align: center;
}
@media (max-width: 639px) and (max-height: 720px) {
  .ds-login-logo {
    margin-bottom: 56px;
  }
}
@media (max-width: 639px) and (max-height: 640px) {
  .ds-login-logo {
    margin-bottom: 48px;
  }
}

.ds-login-logo img {
  height: 32px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.ds-login-logo-link {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.ds-login-logo-link:hover {
  opacity: 0.85;
}

/* Welkom: zelfde typografie als register-wizard .rw-hero (Laten we beginnen!) */
.ds-login-page .ds-login-welcome {
  margin: 0 0 16px 0; /* 2×8: titel → intro */
  text-align: center;
  font-family: var(--font-heading, 'Fira Sans', sans-serif);
  font-size: 1.5rem; /* 24px @ 16px root */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--gray-900, var(--gray-900));
}

.ds-login-lede {
  margin: 0 0 32px 0; /* 4×8: intro → form */
  text-align: center;
  line-height: 1.45;
  font-family: var(--font-body-family, 'Inter', sans-serif);
  font-weight: 400;
  /* Grootte: text-ds-small in template (tikje kleiner dan body) */
}

/* Inline alerts: DS field validation (--error / --warning) tussen intro en formulier */
.ds-login-lede:has(+ .ds-login-inline-alert) {
  margin-bottom: 24px;
}

.ds-login-inline-alert {
  margin: 0 0 24px 0;
  margin-top: 0;
  padding: 16px;
  text-align: left;
  font-size: 14px;
}

.ds-login-inline-link {
  color: var(--brand-black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.ds-login-inline-link:hover {
  color: var(--primary-dark);
}

/* Zelfde opbouw als user edit: geen .ds-form-row margin, alleen gap (veld 24px, label→input 8px via .ds-label) */
.ds-login-form-stack {
  display: flex;
  flex-direction: column;
  gap: 24px; /* veld-blok (velden) → acties (knop) — conform spacing-and-cards */
}

.ds-login-fields {
  display: flex;
  flex-direction: column;
  gap: 24px; /* e-mail-rij → wachtwoord-rij, gelijk user-modal row-gap */
}

.ds-login-form .ds-form-row {
  margin: 0; /* overschrijf forms.css margin-bottom, anders 16px + 24px gap = te wijd */
  min-width: 0;
}

/* Wachtwoord-oog: identiek patroon als Beveiliging (users.css, body.security-page) */
.ds-login-page .security-password-wrap {
  position: relative;
  width: 100%;
}

.ds-login-page .security-password-wrap .ds-input {
  padding-right: 52px;
}

@media (min-width: 640px) {
  .ds-login-page .security-password-wrap .ds-input {
    padding-right: 48px;
  }
}

.ds-login-page .security-password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--gray-400, var(--gray-400));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 640px) {
  .ds-login-page .security-password-toggle {
    width: 40px;
    height: 40px;
    right: 6px;
  }
}

.ds-login-page .security-password-toggle:hover {
  color: var(--gray-600, var(--gray-600));
  background: var(--gray-100, var(--gray-100));
}

.ds-login-page .security-password-toggle .icon-eye,
.ds-login-page .security-password-toggle .icon-eye-off {
  position: absolute;
  transition: opacity 0.15s;
}

.ds-login-page .security-password-toggle .icon-eye-off {
  display: none;
}

.ds-login-page .security-password-toggle.is-visible .icon-eye {
  display: none;
}

.ds-login-page .security-password-toggle.is-visible .icon-eye-off {
  display: block;
}

.ds-login-actions {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 2×8: Inloggen-knop → onthouden-rij (iets luchtiger) */
  min-width: 0;
}

/* Rij: Onthouden | Wachtwoord vergeten */
.ds-login-remember-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  width: 100%;
}

.ds-login-remember {
  margin: 0;
}

/* Label naast vakje: zelfde als filtertekst in bookings */
.ds-login-remember-label {
  font-family: var(--font-body-family, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
  color: var(--content-secondary, var(--gray-600));
}

.ds-login-forgot-link {
  font-family: var(--font-body-family, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--content-secondary, var(--gray-600));
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.ds-login-forgot-link:hover {
  color: var(--brand-black);
}

/* ══ Checkbox: identiek patroon als Kosten / boekingen (.bookings-check-*) ══ */
.ds-login-page .bookings-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  gap: 8px;
}

.ds-login-page .bookings-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}

.ds-login-page .bookings-check-box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-crisp);
  border-radius: var(--radius-sm, 6px);
  background: var(--card, var(--surface-white));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  font-family: var(--font-body-family, 'Inter', sans-serif);
}

.ds-login-page .bookings-checkbox:hover .bookings-check-box {
  border-color: var(--btn-primary-black);
}

.ds-login-page .bookings-check-input:checked + .bookings-check-box {
  background: var(--btn-primary-black);
  border-color: var(--btn-primary-black);
}

.ds-login-page .bookings-check-input:checked + .bookings-check-box::after {
  content: '\2713';
  color: white;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
}

/* Social: lucht onder formulier, dan Inter voor label */
.ds-login-social {
  margin-top: 32px; /* 4×8, compacter (mobiel: minder scroll) */
}

.ds-login-social-title {
  font-family: var(--font-body-family, 'Inter', sans-serif);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground, var(--gray-500));
  margin: 0 0 16px 0; /* 2×8 onder de titel */
  line-height: 1.4;
}

/* Naast elkaar, gelijke breedte, alleen pictogram (Wise-achtig); toelichting via aria-label */
.ds-login-social-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 16px; /* kolom-gap formulier / DS */
  width: 100%;
}

.ds-login-page .ds-login-social-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 200px; /* binnen smalle form max 400: twee tegels + gap */
  height: 48px;
  min-height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Gelijke visuele maat: vaste 24×24-arena voor beide merk-iconen */
.ds-login-page .ds-login-social-icon-wrap {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-login-page .ds-login-social-icon-wrap svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Apple silhouette:zelfde optische gewicht als de gekleurde G (simpleicons 24×24) */
.ds-login-page .ds-login-apple-glyph {
  fill: var(--brand-black);
}

/* Google: merkkleuren (officiële 4-kleuren “G”); Apple: vulling via token */
/* Social pills: duidelijke border-hover (outline-knop) */
.ds-login-page .ds-login-social-btn.ds-btn-outline {
  transition:
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s ease;
}

.ds-login-page .ds-login-social-btn.ds-btn-outline:hover {
  border-color: var(--brand-black);
  background: transparent;
}

.ds-login-page .ds-login-social-btn.ds-btn-outline:focus-visible {
  border-color: var(--brand-black);
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand-black);
}

.ds-login-page .ds-btn:disabled,
.ds-login-page .ds-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Touch targets: min 44px op smal */
@media (max-width: 639px) {
  .ds-login-page .ds-btn {
    min-height: 44px;
  }
}

/* ── Toast: zelfde patroon als overal (onderaan, gecentreerd; notifications.css).
 * Op <1024px is de default `bottom: 100px` voor de app bottombar; op de login-
 * pagina is die bar er niet — dan zit de toast te hoog. Alleen die reserve
 * uitschakelen, geen midden-over-formulier. */
@media (max-width: 1023px) {
  .ds-login-page .ds-toast-container {
    top: auto;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
  }
}

/* ══════════════════════════════════════════════════════════════════
   Legacy: forgot-password, reset-password, accept-invite, register
   (oude .login-center / .settings-modal) — geen .ds-login-page
   Bron: vorige login.css, gelijk houden tot die flows gemigreerd zijn
   ══════════════════════════════════════════════════════════════════ */
body:not(.ds-login-page) * {
  box-sizing: border-box;
}

html body:not(.ds-login-page) {
  height: 100%;
  overflow-x: hidden;
  background: var(--gray-100, #f3f3f3);
  font-family: var(--font-body-family, 'Inter', sans-serif);
  color: var(--gray-600);
}

body:not(.ds-login-page) {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  overflow-y: auto;
  margin: 0;
}

body:not(.ds-login-page) .login-center {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: auto;
  padding: 16px 0;
  box-sizing: border-box;
  width: 100%;
}

body:not(.ds-login-page) .login-logo {
  margin-bottom: 68px;
  max-width: 520px;
  box-sizing: border-box;
  text-align: left;
  flex-shrink: 0;
  width: 100%;
}
body:not(.ds-login-page) .login-logo img {
  height: 32px;
  width: auto;
  display: inline-block;
  max-width: 100%;
}
body:not(.ds-login-page) .login-logo a {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
body:not(.ds-login-page) .login-logo a:hover {
  opacity: 0.8;
}

@media (max-width: 640px) {
  body:not(.ds-login-page) {
    padding: 12px;
    align-items: flex-start;
  }
  body:not(.ds-login-page) .login-center {
    max-width: 100%;
    padding: 8px 0;
  }
}

@media (max-height: 700px) {
  body:not(.ds-login-page) {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  body:not(.ds-login-page) .login-center {
    padding: 8px 0;
  }
  body:not(.ds-login-page) .settings-modal.login-modal {
    padding: 28px;
  }
}
@media (max-height: 600px) {
  body:not(.ds-login-page) {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  body:not(.ds-login-page) .login-center {
    padding: 4px 0;
  }
  body:not(.ds-login-page) .settings-modal.login-modal {
    padding: 24px;
  }
}

body:not(.ds-login-page) .settings-modal.login-modal {
  background: var(--surface-white, #fff);
  border-radius: 20px;
  box-shadow: 0 8px 36px rgba(30, 44, 78, 0.12);
  padding: 36px;
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body:not(.ds-login-page) .settings-title {
  font-size: 1.43rem;
  font-family: var(--font-heading, 'Fira Sans', sans-serif);
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 0.5rem 0;
}
body:not(.ds-login-page) .settings-input {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-pill, 999px);
  padding: 0.74em 1.06em;
  font-size: 1rem;
  color: var(--foreground);
  transition: border 0.17s, box-shadow 0.2s;
  outline: none;
  font-weight: 600;
  margin-bottom: 1.1rem;
  width: 100%;
}
body:not(.ds-login-page) .settings-input:focus {
  border-color: var(--accent-color, var(--border-primary));
  box-shadow: 0 0 0 1.5px var(--accent-shadow, var(--border-primary));
  font-weight: 700;
}
body:not(.ds-login-page) .settings-label {
  font-weight: 700;
  color: var(--gray-800);
  font-size: 1.1rem;
  margin-bottom: 0.23em;
  line-height: 1.3;
  display: block;
}
body:not(.ds-login-page) .settings-btn-primary {
  margin-top: 0.7em;
  background: var(--btn-primary-black, var(--gray-800));
  color: #fff;
  border: none;
  border-radius: var(--radius-pill, 999px);
  font-weight: 700;
  padding: 0.8em 1.6em;
  font-size: 1.1rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.13s;
}
body:not(.ds-login-page) .settings-btn-primary:hover:not(:disabled) {
  background: #000;
}
body:not(.ds-login-page) .settings-btn-primary:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  pointer-events: none;
}
body:not(.ds-login-page) .settings-btn-primary .btn-ellipsis[hidden] {
  display: none !important;
}
body:not(.ds-login-page) .settings-btn-primary .btn-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
body:not(.ds-login-page) .settings-btn-primary .btn-ellipsis span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  animation: login-btn-ellipsis-bounce 1s ease-in-out infinite;
}
body:not(.ds-login-page) .settings-btn-primary .btn-ellipsis span:nth-child(2) {
  animation-delay: 0.15s;
}
body:not(.ds-login-page) .settings-btn-primary .btn-ellipsis span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes login-btn-ellipsis-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  40% {
    transform: translateY(-2px);
    opacity: 1;
  }
}
body:not(.ds-login-page) .settings-btn-secondary {
  background: var(--btn-gray, var(--gray-200));
  color: var(--gray-800);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill, 999px);
  font-weight: 700;
  padding: 0.8em 1.6em;
  font-size: 1.1rem;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
}
body:not(.ds-login-page) .settings-btn-secondary:hover {
  background: var(--gray-300, var(--gray-300));
  color: var(--gray-800);
  text-decoration: none;
}
body:not(.ds-login-page) .login-error {
  color: var(--sent-red, #c34141);
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 600;
}
@media (max-width: 480px) {
  body:not(.ds-login-page) {
    padding: 8px;
  }
  body:not(.ds-login-page) .settings-modal.login-modal {
    padding: 24px;
    max-width: calc(100% - 1rem);
  }
  body:not(.ds-login-page) .login-logo {
    max-width: calc(100% - 1rem);
  }
}
body:not(.ds-login-page) .settings-modal.login-modal .settings-title {
  margin-bottom: 3rem;
}
body:not(.ds-login-page) .settings-modal.login-modal .settings-label {
  margin-bottom: 0.45rem !important;
}
body:not(.ds-login-page) .settings-modal.login-modal .settings-input {
  margin-bottom: 1.4rem;
}
body:not(.ds-login-page) .forgot-password-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--gray-500);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.2s;
}
body:not(.ds-login-page) .forgot-password-link:hover {
  color: var(--gray-600);
}