/*
 * Stadium-look auth pages (forgot-password / reset-password / etc.) —
 * Razor sibling of the styles in LoginView.vue. The tokens are duplicated
 * intentionally for v1: the Vue login still owns its scoped CSS, and we'd
 * rather accept a little drift than couple a Razor stylesheet to a Vue
 * component (which would force Vue to drop scope on those rules). When we
 * extract a single source of truth (v1.1), this file should be the host
 * and LoginView.vue should import from it.
 *
 * Naming: .pp-auth-* — a sibling of .pp-stat-strip / .pp-delta-pill etc.
 * Colors are product-level (no tenant override): Identity-pages live
 * outside the tenant scope by design.
 */

.pp-auth-stage {
  position: relative;
  min-height: 100vh;
  padding: 0 16px env(safe-area-inset-bottom);
  background-image: url('/images/login-achtergrond.jpg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  color: #E8ECF2;
  font-family: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
}

.pp-auth-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 32%,
      rgba(10, 14, 26, 0.18),
      rgba(10, 14, 26, 0.72) 75%),
    linear-gradient(180deg, rgba(10, 14, 26, 0.15), rgba(10, 14, 26, 0.55));
  pointer-events: none;
  opacity: 0.6;
}

.pp-auth-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 400px;
  margin: 0 auto;
  padding-top: 54px;
  padding-bottom: 32px;
}

/* Logo + eyebrow stack — same alignment as the login. */
.pp-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pp-auth-brand__logo {
  display: block;
  width: 170px;
  height: auto;
  max-width: 60vw;
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.4));
}

.pp-auth-brand__eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00C2A8;
}

/* Card heading: bigger than the eyebrow, anchors the page topic. */
.pp-auth-title {
  margin: 28px 0 6px 0;
  font-size: 22px;
  font-weight: 700;
  color: #E8ECF2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  text-align: center;
  letter-spacing: -0.01em;
}

.pp-auth-body {
  margin: 0 0 24px 0;
  font-size: 13px;
  line-height: 1.6;
  color: #C5CCD8;
  text-align: center;
}

/* Form ----------------------------------------------------------- */
.pp-auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pp-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-auth-field__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #C5CCD8;
}

.pp-auth-field__input {
  width: 100%;
  background: rgba(10, 14, 26, 0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0.5px solid rgba(200, 220, 255, 0.18);
  border-radius: 12px;
  padding: 15px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #E8ECF2;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  box-sizing: border-box;
}

.pp-auth-field__input::placeholder {
  color: #9CA3AF;
}

.pp-auth-field__input:focus {
  outline: none;
  border-color: #00C2A8;
  box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.12);
}

.pp-auth-submit {
  margin-top: 6px;
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #00C2A8, #00A892);
  color: #0A0E1A;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 24px -4px rgba(0, 194, 168, 0.55);
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.pp-auth-submit:hover:not(:disabled) { filter: brightness(1.05); }
.pp-auth-submit:active:not(:disabled) { transform: scale(0.98); }
.pp-auth-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* Secondary link below the form, e.g. "Terug naar inloggen". */
.pp-auth-link {
  align-self: center;
  margin-top: 14px;
  font-size: 12px;
  color: #C5CCD8;
  text-decoration: none;
}
.pp-auth-link:hover {
  color: #E8ECF2;
  text-decoration: underline;
}

/* Validation
 * Identity's tag helpers render <div class="validation-summary-errors">
 * and <span class="field-validation-error">. We style those directly so
 * we don't have to touch the page markup. .field-validation-valid stays
 * empty by default — no styling needed.
 */
.pp-auth-error,
.validation-summary-errors {
  font-size: 13px;
  color: #F09595;
  border-radius: 10px;
  padding: 12px;
  background-color: rgba(240, 149, 149, 0.08);
  border: 1px solid rgba(240, 149, 149, 0.3);
}
.validation-summary-errors ul {
  margin: 0;
  padding-left: 18px;
}

.field-validation-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #F09595;
}

/* Confirmation pages: less form, more "you're done". The same card
 * geometry but with a centred body and a single link back to login.
 */
.pp-auth-confirmation {
  margin-top: 18px;
  text-align: center;
}
.pp-auth-confirmation__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 194, 168, 0.15);
  color: #00C2A8;
  font-size: 24px;
  line-height: 1;
}

/* ---------------------------------------------------------------
 * Desktop: zelfde telefoon-frame-op-grasveld als de tenant-login
 * (spiegelt main.css .pp-app-frame). Onder 768px blijft de stage
 * full-bleed (mobile-first). Het grasveld (app-bg-desktop.jpg) komt
 * op body; de stadion-backdrop (login-achtergrond.jpg) blijft de
 * achtergrond ván 't frame zelf, net als in de Vue-login.
 *
 * auth.css wordt uitsluitend door _AuthLayout.cshtml geladen, dus
 * deze body-regels raken geen admin- of tenant-app-pagina's.
 * --------------------------------------------------------------- */
@media (min-width: 768px) {
  body {
    box-sizing: border-box;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    overflow: hidden;
    background-image: url('/images/app-bg-desktop.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .pp-auth-stage {
    /* Vaste iPhone-verhouding; hoogte volgt de viewport zodat 't frame
       altijd past. min-height: 0 overrult de mobile-first 100vh. */
    min-height: 0;
    aspect-ratio: 380 / 820;
    height: min(820px, calc(100vh - 64px));
    width: auto;
    max-width: 380px;
    flex: none;
    border: 1px solid #1F2937;
    border-radius: 24px;
    /* Korte forms passen ruim; mocht 't ooit overlopen dan scrollt 't
       frame zelf (verborgen scrollbar zoals in 't tenant-frame). */
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.7);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pp-auth-stage::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}