/*
 * Inloggningens stil (förlaga: Recline, 2026-10-05).
 * Ett ljusgrått kort på grå sida. Vänster: logga uppe till vänster, lugnt
 * formulär i mitten, villkorsrad längst ner. Höger: målad bakgrund med en
 * nedskalad, företagsneutral vy av portalen som klipps av vid högerkanten.
 *
 * Gäller inloggning, registrering, mellanstegen (index.html) och återställning
 * (aterstall.html, body.inlogg-sida). Allt är scopat på id/body-klass så att
 * portalens övriga .btn-primary/.auth-* inte påverkas.
 */

:root {
  --il-sida: #c4c4c4;
  --il-kort: #efefef;
  --il-text: #202020;
  --il-sek: #666666;
  --il-damp: #8e8e8e;
  --il-kant: rgba(0, 0, 0, .09);
  --il-kant-hover: rgba(0, 0, 0, .18);
  --il-avd: rgba(0, 0, 0, .055);
  --il-knapp: #2b2b2b;
  --il-ease: cubic-bezier(.2, 0, 0, 1);
  --il-ut: cubic-bezier(.23, 1, .32, 1);
}

@keyframes il-upp { from { opacity: 0; transform: translateY(4px); } }
@keyframes il-in { from { opacity: 0; } }
@keyframes il-shimmer { to { background-position: 0 0, 200% 0; } }
@property --il-fyll { syntax: '<color>'; inherits: true; initial-value: #2b2b2b; }

/* ── Sidan och kortet ─────────────────────────────────────────────────── */
:is(#auth-view, #signup-view, .inlogg-sida .auth-view) {
  height: 100dvh;
  display: flex;
  padding: clamp(16px, 5vh, 56px) clamp(16px, 7vw, 132px);
  background: var(--il-sida);
  overflow: hidden;
}
body.inlogg-sida { background: var(--il-sida); }

/* Vänster och höger delar kortets bakgrund — tillsammans ser de ut som ett kort. */
:is(#auth-view, #signup-view, .inlogg-sida) .auth-left {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: 104px 56px 84px;
  background: var(--il-kort);
  border-radius: 16px 0 0 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

:is(#auth-view, #signup-view, .inlogg-sida) .auth-form-wrap {
  position: static;
  width: 100%;
  max-width: 370px;
  margin: auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--il-text);
}

/* Loggan sitter i kortets hörn, oavsett var i formuläret den står i koden. */
:is(#auth-view, #signup-view, .inlogg-sida) .auth-logo-badge {
  position: absolute;
  top: 36px;
  left: 48px;
  margin: 0;
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-logo-badge img { height: 52px; width: auto; }

/* ── Text ─────────────────────────────────────────────────────────────── */
:is(#auth-view, #signup-view, .inlogg-sida) .auth-heading {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--il-text);
  text-align: center;
  margin: 0 0 6px;
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-subheading {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--il-sek);
  text-align: center;
  margin: 0 0 28px;
}

/* ── Google + avdelare ────────────────────────────────────────────────── */
:is(#auth-view, #signup-view, .inlogg-sida) .btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  margin: 0 0 20px;
  background: #fff;
  border: 1px solid var(--il-kant);
  border-radius: 10px;
  color: var(--il-text);
  font: 500 14px/1 Inter, -apple-system, sans-serif;
  cursor: pointer;
  transition: transform 140ms var(--il-ut), background-color 160ms ease, border-color 160ms ease;
}
:is(#auth-view, #signup-view, .inlogg-sida) .btn-google svg { width: 16px; height: 16px; flex: none; }

:is(#auth-view, #signup-view, .inlogg-sida) .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-divider::before,
:is(#auth-view, #signup-view, .inlogg-sida) .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--il-kant);
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-divider span { font-size: 12px; color: var(--il-damp); }

/* ── Fält ─────────────────────────────────────────────────────────────── */
:is(#auth-view, #signup-view, .inlogg-sida) .auth-field { margin: 0 0 14px; }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-field label,
:is(#auth-view, #signup-view, .inlogg-sida) .auth-label-row label {
  display: block;
  font: 500 13px/1.3 Inter, -apple-system, sans-serif;
  color: var(--il-text);
  margin: 0 0 6px;
}
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-label-row .auth-reset-link { margin-bottom: 6px; }

:is(#auth-view, #signup-view, .inlogg-sida) .auth-input-glass {
  background: #fff;
  border: 1px solid var(--il-kant);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-input-glass:focus-within {
  background: #fff;
  border-color: rgba(0, 0, 0, .28);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-input-glass input {
  height: 40px;
  padding: 0 12px;
  font: 400 14px/1 Inter, -apple-system, sans-serif;
  color: var(--il-text);
  border-radius: 10px;
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-input-glass input::placeholder { color: var(--il-damp); }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-pw-wrap input { padding-right: 40px; }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-pw-toggle { right: 11px; color: var(--il-damp); transition: color 120ms ease; }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-pw-toggle svg { width: 16px; height: 16px; }

:is(#auth-view, #signup-view, .inlogg-sida) .auth-reset-link {
  font-size: 13px;
  color: var(--il-sek);
  text-decoration: none;
  transition: color 120ms ease;
}

:is(#auth-view, #signup-view, .inlogg-sida) .auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 18px;
  font-size: 13px;
  color: var(--il-sek);
  cursor: pointer;
  user-select: none;
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-remember input { width: 15px; height: 15px; accent-color: var(--il-knapp); }

/* ── Huvudknapp ───────────────────────────────────────────────────────── */
:is(#auth-view, #signup-view, .inlogg-sida) .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  margin: 0 0 20px;
  /* Mörk fyllning med ZAAI:s shimmerfärg som kontur. Gradienten ritas under
     fyllningen (border-box) och syns bara i den genomskinliga kanten. */
  --il-fyll: var(--il-knapp);
  background:
    linear-gradient(var(--il-fyll), var(--il-fyll)) padding-box,
    linear-gradient(100deg, #9f80da 0%, #c8b0f5 25%, #e879a8 50%, #B1D8F2 75%, #9f80da 100%) border-box;
  background-size: 100% 100%, 200% 100%;
  border: 2px solid transparent;
  border-radius: 10px;
  color: #fafafa;
  animation: il-shimmer 6s linear infinite;
  font: 500 14px/1 Inter, -apple-system, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: transform 140ms var(--il-ut), --il-fyll 160ms ease;
}
:is(#auth-view, #signup-view, .inlogg-sida) .btn-primary:active,
:is(#auth-view, #signup-view, .inlogg-sida) .btn-google:active { transform: scale(.97); }
:is(#auth-view, #signup-view, .inlogg-sida) .btn-primary:disabled { opacity: .45; cursor: default; transform: none; }

@media (hover: hover) and (pointer: fine) {
  :is(#auth-view, #signup-view, .inlogg-sida) .btn-primary:hover:not(:disabled) { --il-fyll: #1a1a1a; box-shadow: none; }
  :is(#auth-view, #signup-view, .inlogg-sida) .btn-google:hover { background: #fafafa; border-color: var(--il-kant-hover); }
  :is(#auth-view, #signup-view, .inlogg-sida) .auth-input-glass:hover:not(:focus-within) { border-color: var(--il-kant-hover); }
  :is(#auth-view, #signup-view, .inlogg-sida) .auth-reset-link:hover { color: var(--il-text); text-decoration: none; }
  :is(#auth-view, #signup-view, .inlogg-sida) .auth-pw-toggle:hover { color: var(--il-text); }
}

/* ── Fel, notis, villkor ──────────────────────────────────────────────── */
:is(#auth-view, #signup-view, .inlogg-sida) .auth-error { border-radius: 10px; font-size: 13px; }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-error.visible { animation: il-upp 180ms var(--il-ease); }

:is(#auth-view, #signup-view, .inlogg-sida) .auth-notice {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--il-sek);
  text-align: center;
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-notice a,
.auth-villkor a { color: var(--il-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(0, 0, 0, .25); }

.auth-villkor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  margin: 0;
  font: 400 13px/1.4 Inter, -apple-system, sans-serif;
  color: var(--il-sek);
  text-align: center;
}

/* ── Höger: bilden och portalvyn ──────────────────────────────────────── */
:is(#auth-view, #signup-view, .inlogg-sida, .portal-gate) .auth-right {
  flex: 1 1 50%;
  min-width: 0;
  display: none;
  padding: 40px 40px 40px 0;
  background: var(--il-kort);
  border-radius: 0 16px 16px 0;
}
@media (min-width: 960px) {
  :is(#auth-view, #signup-view, .inlogg-sida, .portal-gate) .auth-right { display: flex; }
}
@media (max-width: 959px) {
  :is(#auth-view, #signup-view, .inlogg-sida) .auth-left { border-radius: 16px; }
}

:is(#auth-view, #signup-view, .inlogg-sida, .portal-gate) .auth-right-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #3a2a1f;
  box-shadow: none;
  animation: il-in 360ms var(--il-ease) 60ms backwards;
}
:is(#auth-view, #signup-view, .inlogg-sida, .portal-gate) .auth-right-noise,
:is(#auth-view, #signup-view, .inlogg-sida, .portal-gate) .auth-right-quote { display: none; }

/* Scenen: fotot av skrivbordet täcker bilden (som cover); den riktiga portalen
   körs i full storlek (1920×1080) inne i skärmen och klipps vid fotots högerkant. Läge, skala och perspektiv sätts av inlogg-portalvy.js. */
.auth-portalvy {
  position: absolute;
  inset: 0;
  animation: il-in 420ms var(--il-ut) 120ms backwards;
}
.pv-scen {
  position: absolute;
  top: 0;
  left: 0;
  width: 1463px;
  height: 1075px;
  transform-origin: 0 0;
}
.pv-foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.pv-skarm {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform-origin: 0 0;
  background: #f5f5f4;
}
/* Rummets varma, dämpade ljus faller lätt över glaset. */
.pv-skarm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 214, 160, .07), rgba(40, 24, 10, .10));
}

/* ── Portalvyn ────────────────────────────────────────────────────────── */
.pv-fonster {
  width: 1920px;
  height: 1080px;
  background: #f5f5f4;
  user-select: none;
}
.pv-fonster { position: relative; }
/* Den riktiga portalen körs i en iframe; den tonar in när den är klar och
   neutraliserad. Ren dekor — går inte att klicka i. */
.pv-portal {
  position: absolute;
  inset: 0;
  display: block;
  width: 1920px;
  height: 1080px;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--il-ease);
}
.pv-portal.pv-klar { opacity: 1; }

/* Muspekaren: spetsen ligger i hållarens origo. */
.pv-pekare-hallare {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translate(960px, 690px);
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(.45, 0, .2, 1), ease;
  pointer-events: none;
}
.pv-pekare {
  display: block;
  width: 30px;
  height: 30px;
  margin: -3px 0 0 -5px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22));
  transform-origin: 5px 3px;
  transition: transform 120ms var(--il-ut);
}
.pv-klick .pv-pekare { transform: scale(.86); }

/* ── Inträde ──────────────────────────────────────────────────────────── */
:is(#auth-view, #signup-view, .inlogg-sida) .auth-form-wrap > *,
:is(#auth-view, #signup-view, .inlogg-sida) #form-login > *,
.auth-villkor { animation: il-upp 240ms var(--il-ease) backwards; }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-form-wrap > :nth-child(2) { animation-delay: 40ms; }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-form-wrap > :nth-child(3) { animation-delay: 80ms; }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-form-wrap > :nth-child(4) { animation-delay: 110ms; }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-form-wrap > :nth-child(n+5) { animation-delay: 140ms; }
:is(#auth-view, #signup-view, .inlogg-sida) .auth-logo-badge { animation-delay: 0ms; }
.auth-villkor { animation-delay: 200ms; }
/* Knappen har både inträdet och shimmern på konturen. */
:is(#auth-view, #signup-view, .inlogg-sida) :is(#form-login, .auth-form-wrap, form) > .btn-primary {
  animation: il-upp 240ms var(--il-ease) 140ms backwards, il-shimmer 6s linear infinite;
}
/* De gamla stagger-klasserna styrs nu härifrån. */
:is(#auth-view, #signup-view, .inlogg-sida) .auth-fade { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  :is(#auth-view, #signup-view, .inlogg-sida) *,
  .auth-villkor, .auth-portalvy {
    animation-name: il-in !important;
    animation-duration: 160ms !important;
    animation-delay: 0ms !important;
  }
  :is(#auth-view, #signup-view, .inlogg-sida) .btn-primary:active,
  :is(#auth-view, #signup-view, .inlogg-sida) .btn-google:active { transform: none; }
}

/* ── Mellanstegen (portal-gate) i samma uppdelning ────────────────────────
   Mejlbekräftelse, tvåstegsinloggning, portalvillkor, väntar på avtal och
   inbjudan krävs: kortet blir vänsterspalten, högerkolumnen med skärmen
   flyttas hit av mountAuthRight(). Id-scopat så att det slår portalens
   egna .portal-gate-regler. */
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) {
  height: 100dvh;
  min-height: 0;
  align-items: stretch;
  justify-content: stretch;
  padding: clamp(16px, 5vh, 56px) clamp(16px, 7vw, 132px);
  background: var(--il-sida);
  overflow: hidden;
}
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .portal-gate-card {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: 104px 56px 84px;
  background: var(--il-kort);
  border-radius: 16px 0 0 16px;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--il-text);
  animation: il-in 360ms var(--il-ease) backwards;
}
@media (max-width: 959px) {
  :is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .portal-gate-card { border-radius: 16px; }
}
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .portal-gate-card > * {
  width: 100%;
  max-width: 420px;
  flex: none;
}
/* Loggan i kortets hörn, som på inloggningen. */
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .portal-gate-card > img:first-child {
  position: absolute;
  top: 36px;
  left: 48px;
  width: auto;
  height: 52px;
  margin: 0;
}
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .portal-gate-card h1 {
  font: 600 20px/1.3 Inter, -apple-system, sans-serif;
  letter-spacing: -.01em;
  color: var(--il-text);
  text-align: center;
  margin: 0 0 6px;
}
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .portal-gate-card h1 + p {
  text-align: center;
  margin-bottom: 8px;
}
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .portal-gate-card p {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--il-sek);
}
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) :is(.gate-secondary, .gate-link) {
  height: 40px;
  min-height: 40px;
  border-radius: 10px;
  font: 500 14px/1 Inter, -apple-system, sans-serif;
  color: var(--il-text);
}
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .gate-secondary {
  background: #fff;
  border: 1px solid var(--il-kant);
  transition: transform 140ms var(--il-ut), border-color 160ms ease;
}
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .gate-secondary:hover { border-color: var(--il-kant-hover); }
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .gate-secondary:active { transform: scale(.97); }
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) :is(.agreement-waiting-note, .terms-check, .portal-terms-card dl) {
  margin-top: 22px;
  border-radius: 14px;
  font-size: 14px;
}

/* ── Fullskärm och vitt (2026-10-16) ──────────────────────────────────────
   Kortet fyller hela fönstret: ingen grå ram runt, inga rundade hörn, vit botten. */
:root { --il-sida: #ffffff; --il-kort: #ffffff; }
:is(#auth-view, #signup-view, .inlogg-sida .auth-view,
    #email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) {
  padding: 0;
}
:is(#auth-view, #signup-view, .inlogg-sida) .auth-left,
:is(#auth-view, #signup-view, .inlogg-sida, .portal-gate) .auth-right,
:is(#email-verification-view, #mfa-enrollment-view, #portal-terms-view, #agreement-waiting-view, #invitation-required-view) .portal-gate-card {
  border-radius: 0;
}