/* ─── Design tokens ───────────────────────────────────────────
   Define all colors here. Every value below uses these variables.
   Swap one line to retheme the whole form.
   ─────────────────────────────────────────────────────────── */
.registration-page {
  --c-primary: #6f42c1;
  --c-success: #198754;
  --c-danger: #dc3545;
  --c-border: #ced4da;
  --c-border-sub: #dee2e6;
  --c-surface: #f8f9fa;
  --c-text: #212529;
  --c-text-muted: #555;
  --c-text-hint: #adb5bd;

  /* Semi-transparent tints derived from the tokens above.
     color-mix() blends two colors in oklch space — perceptually
     uniform, so tints look "correct" across all hue values. */
  --c-primary-tint: color-mix(in oklch, var(--c-primary) 15%, transparent);
  --c-danger-tint: color-mix(in oklch, var(--c-danger) 12%, transparent);
  --c-danger-bg: color-mix(in oklch, var(--c-danger) 8%, white);
  --c-danger-bdr: color-mix(in oklch, var(--c-danger) 25%, transparent);
  --c-success-bg: color-mix(in oklch, var(--c-success) 8%, white);
  --c-success-bdr: color-mix(in oklch, var(--c-success) 25%, transparent);
}

/* ─── Page / container overflow ──────────────────────────────
   Override any hard-coded heights so the page grows with its
   content instead of clipping the form on short viewports.
   100dvh = 100% of the *dynamic* viewport height — on mobile
   this accounts for the browser chrome showing/hiding.
   ─────────────────────────────────────────────────────────── */
.registration-page.signin-registration-body,
.registration-page .signin-registration-container {
  min-block-size: 100dvh;
  block-size: auto;
}

.registration-page.signin-registration-body {
  overflow-y: auto;
}

.registration-page .signin-registration-content {
  overflow-y: auto;
  max-block-size: none;
  block-size: auto;
}

.registration-page .signin-registration-main {
  overflow: visible;
  padding-block-end: 2rem;
}

/* ─── Inputs ─────────────────────────────────────────────────
   .form-control selector covers Blazor/Bootstrap classes that
   get injected onto the element at runtime.
   ─────────────────────────────────────────────────────────── */
.registration-page .reg-input,
.registration-page .reg-input.form-control {
  font-size: 0.875rem;
  line-height: 1.5;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  block-size: auto;
  min-block-size: 0;
  border: 1px solid var(--c-border);
  border-radius: 0.375rem;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.registration-page .reg-input:focus,
.registration-page .reg-input.form-control:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-primary-tint);
  outline: none;
}

.registration-page .reg-input::placeholder {
  color: var(--c-text-hint);
  font-weight: 400;
}

/* ─── Form layout ────────────────────────────────────────────
   .field-row enables side-by-side halves; it stacks on mobile
   via the media query at the bottom of this file.
   ─────────────────────────────────────────────────────────── */
.registration-page .form-fields {
  display: flex;
  flex-direction: column;
}

.registration-page .field-group {
  display: flex;
  flex-direction: column;
  margin-block-end: 0.875rem;
}

.registration-page .field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-text-muted);
  margin-block-end: 0.25rem;
  letter-spacing: 0.01em;
}

.registration-page .field-row {
  flex-direction: row;
  gap: 0.75rem;
}

.registration-page .field-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-inline-size: 0; /* prevents flex children from overflowing */
}

/* ─── Password requirements ──────────────────────────────────
   Targeting <span> and <svg> directly instead of inheriting
   from <li> because a global * { color } rule in the host
   stylesheet was overriding li-level color.
   ─────────────────────────────────────────────────────────── */
.pw-requirements {
  list-style: none;
  margin-block: -0.25rem 0.875rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.75rem;
}

.pw-req {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  transition: color 250ms ease;
}

.pw-req span {
  color: #999;
}
.pw-req svg {
  inline-size: 0.8rem;
  block-size: 0.8rem;
  flex-shrink: 0;
}

/* No input yet */
.pw-req-empty {
  opacity: 0.4;
  stroke: #999;
}

/* Requirement met */
.pw-req-met span {
  color: var(--c-success);
}
.pw-req-met svg {
  stroke: var(--c-success);
  animation: checkPop 250ms ease-out;
}

/* Requirement unmet */
.pw-req-unmet span {
  color: var(--c-danger);
}
.pw-req-unmet svg {
  stroke: var(--c-danger);
  opacity: 0.7;
}

@keyframes checkPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ─── Validation messages ────────────────────────────────────
   Shared between .field-group and .field-half children via
   the comma-separated selector.
   ─────────────────────────────────────────────────────────── */
.validation-message {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-danger);
  padding-block-start: 0.25rem;
  padding-inline-start: 0.125rem;
  animation: fieldFadeIn 200ms ease-out;
}

@keyframes fieldFadeIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Alert banners ──────────────────────────────────────────
   color-mix() creates tinted backgrounds from the token colors
   without needing separate hex values for every shade.
   ─────────────────────────────────────────────────────────── */
.registration-page .alert {
  border-radius: 0.5rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-block-end: 1.25rem;
  text-align: start;
}

.registration-page .alert-danger {
  background-color: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid var(--c-danger-bdr);
}

.registration-page .alert-danger ul {
  margin-block: 0.375rem 0;
  padding-inline-start: 1.25rem;
  list-style: disc;
}

.registration-page .alert-danger li {
  padding-block: 0.125rem;
}

.registration-page .alert-success {
  background-color: var(--c-success-bg);
  color: var(--c-success);
  border: 1px solid var(--c-success-bdr);
}

/* ─── Input validation states ────────────────────────────────
   :is() collapses what were four near-identical selectors into
   one, with no change in specificity behaviour.
   .valid only highlights after the field has been touched
   (.modified is set by Blazor's EditForm validation).
   ─────────────────────────────────────────────────────────── */
.registration-page :is(.field-group, .field-half) .invalid,
.registration-page :is(.field-group, .field-half) input.invalid {
  border-color: var(--c-danger) !important;
  box-shadow: 0 0 0 2px var(--c-danger-tint);
}

.registration-page :is(.field-group, .field-half) input.valid.modified {
  border-color: var(--c-success) !important;
}

/* ─── Password field with visibility toggle ──────────────────
   The wrapper uses position: relative so the button can be
   pinned to the input's inline-end (right in LTR) with
   position: absolute.
   ─────────────────────────────────────────────────────────── */
.registration-page .password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.registration-page .password-input-wrapper input {
  padding-inline-end: 3rem !important;
  inline-size: 100%;
}

.registration-page .password-toggle {
  position: absolute;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  inline-size: 2.25rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-hint);
  transition: color 150ms ease;
}

.registration-page .password-toggle:hover {
  color: var(--c-text);
}

.registration-page .password-toggle svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
}

/* ─── SMS radio group ────────────────────────────────────────*/
.registration-page .sms-group {
  gap: 0.5rem;
  padding-block: 0.125rem;
}

.registration-page .sms-group .e-radio-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
  cursor: pointer;
}

/* ─── Submit button & sign-in link ───────────────────────────*/
.registration-page .signin-registration-form .btn-purple {
  margin-block-start: 0.25rem;
  inline-size: 100%;
}

.registration-page .signin-link {
  text-align: center;
  margin-block-start: 1rem;
  font-size: 0.8rem;
}

/* ─── Confirmation summary ───────────────────────────────────
   confirmSlideIn runs once as the summary panel mounts.
   ─────────────────────────────────────────────────────────── */
.registration-page .confirm-subheading {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  margin-block: 0.25rem 0;
}

.registration-page .confirm-summary {
  margin-block-start: 1.25rem;
  animation: confirmSlideIn 300ms ease-out;
}

@keyframes confirmSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.registration-page .confirm-fields {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-sub);
  border-radius: 0.5rem;
  overflow: hidden;
}

.registration-page .confirm-row {
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--c-border-sub);

  & dt {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-end: 0.125rem;
  }

  & dd {
    margin: 0;
    font-size: 1rem;
    color: var(--c-text);
  }
}

/* :last-child removes the border on the final row without a
   separate rule — relies on native CSS nesting (supported in
   all modern browsers as of mid-2023). */
.registration-page .confirm-row:last-child {
  border-block-end: none;
}

.registration-page .confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-block-start: 1.25rem;
}

.registration-page .confirm-actions .btn-purple {
  inline-size: 100%;
}

.registration-page .btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--c-border-sub);
  border-radius: 0.375rem;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  font-size: 0.8rem;
  color: var(--c-text-muted);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;

  &:hover {
    background-color: var(--c-surface);
    border-color: var(--c-text-muted);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* ─── Mobile overrides (≤ 600px) ─────────────────────────────
   Stacks field rows, tightens spacing, and shrinks text that
   was already small at desktop sizes.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .registration-page .field-group {
    margin-block-end: 0.625rem;
  }

  .registration-page .field-row {
    flex-direction: column;
    gap: 0;
  }

  .registration-page .field-half {
    margin-block-end: 0.625rem;
  }

  .registration-page :is(.field-group, .field-half) .validation-message {
    font-size: 0.7rem;
  }

  .pw-requirements {
    flex-direction: column;
    gap: 0.125rem;
  }
  .registration-page .pw-requirements {
    flex-direction: column;
    gap: 0.125rem;
  }

  .registration-page .sms-group .e-radio-wrapper {
    font-size: 0.75rem;
  }

  .registration-page .alert {
    font-size: 0.8rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
  }

  .registration-page .confirm-row dt {
    font-size: 0.65rem;
  }
}