/* Account pages (ASP.NET Core Identity's pages, and /Setup) inside the Vuexy auth card.
   One heading and one supporting line per page, labelled fields, one primary button, quiet links. */

body {
  font-family: 'Public Sans', var(--bs-body-font-family);
}

/* Colours with enough contrast for text (4.5:1) on the card and on the alert tints. The theme's primary,
   danger and success colours are made for fills and icons: as text, or under white text, they fall short.
   --pl-link          links and the outline button's text
   --pl-primary-fill  fills that carry white text (primary buttons, the current account page)
   --pl-danger-fill   the same for the danger button
   --pl-quiet         secondary text: "Sign out", the "Off" pill, a disabled field's value
   --pl-placeholder   placeholders */
.pl-auth {
  --pl-link: color-mix(in sRGB, var(--bs-primary) 80%, #000);
  --pl-primary-fill: color-mix(in sRGB, var(--bs-primary) 90%, #000);
  --pl-danger-fill: color-mix(in sRGB, var(--bs-danger) 80%, #000);
  --pl-danger-text: color-mix(in sRGB, var(--bs-danger) 68%, #000);
  --pl-success-text: color-mix(in sRGB, var(--bs-success) 55%, #000);
  --pl-warning-text: color-mix(in sRGB, var(--bs-warning) 50%, #000);
  --pl-quiet: #63616c;
  --pl-placeholder: #6f6d79;
}

[data-bs-theme='dark'] .pl-auth {
  --pl-link: color-mix(in sRGB, var(--bs-primary) 60%, #fff);
  --pl-danger-text: color-mix(in sRGB, var(--bs-danger) 60%, #fff);
  --pl-success-text: color-mix(in sRGB, var(--bs-success) 75%, #fff);
  --pl-warning-text: color-mix(in sRGB, var(--bs-warning) 85%, #fff);
  --pl-quiet: #b0afc4;
  --pl-placeholder: #a09fb6;
}

.pl-auth a:not(.btn):not(.pl-nav a):not(.app-brand-link) {
  color: var(--pl-link);
}

.pl-auth a:not(.btn):not(.pl-nav a):not(.app-brand-link):hover {
  color: color-mix(in sRGB, var(--pl-link) 85%, var(--bs-heading-color));
}

/* On the dark theme the alert tints are lighter than the card, so a link inside one is lighter still. */
[data-bs-theme='dark'] .pl-auth .alert a:not(.btn):not(.pl-nav a):not(.app-brand-link) {
  color: color-mix(in sRGB, var(--bs-primary) 45%, #fff);
}

.pl-auth .btn-primary {
  --bs-btn-bg: var(--pl-primary-fill);
  --bs-btn-border-color: var(--pl-primary-fill);
  --bs-btn-hover-bg: color-mix(in sRGB, #000 10%, var(--pl-primary-fill));
  --bs-btn-hover-border-color: color-mix(in sRGB, #000 10%, var(--pl-primary-fill));
  --bs-btn-active-bg: color-mix(in sRGB, #000 10%, var(--pl-primary-fill));
  --bs-btn-active-border-color: color-mix(in sRGB, #000 10%, var(--pl-primary-fill));
  --bs-btn-disabled-bg: var(--pl-primary-fill);
  --bs-btn-disabled-border-color: var(--pl-primary-fill);
}

.pl-auth .btn-outline-primary {
  --bs-btn-color: var(--pl-link);
  --bs-btn-border-color: var(--pl-link);
  --bs-btn-hover-color: var(--pl-link);
  --bs-btn-hover-border-color: var(--pl-link);
  --bs-btn-active-color: var(--pl-link);
  --bs-btn-active-border-color: var(--pl-link);
}

.pl-auth .btn-danger {
  --bs-btn-bg: var(--pl-danger-fill);
  --bs-btn-border-color: var(--pl-danger-fill);
  --bs-btn-hover-bg: color-mix(in sRGB, #000 10%, var(--pl-danger-fill));
  --bs-btn-hover-border-color: color-mix(in sRGB, #000 10%, var(--pl-danger-fill));
  --bs-btn-active-bg: color-mix(in sRGB, #000 10%, var(--pl-danger-fill));
  --bs-btn-active-border-color: color-mix(in sRGB, #000 10%, var(--pl-danger-fill));
}

.pl-auth .btn-outline-danger {
  --bs-btn-color: var(--pl-danger-text);
  --bs-btn-border-color: var(--pl-danger-text);
  --bs-btn-hover-color: var(--pl-danger-text);
  --bs-btn-hover-border-color: var(--pl-danger-text);
  --bs-btn-active-color: var(--pl-danger-text);
  --bs-btn-active-border-color: var(--pl-danger-text);
}

.pl-auth :is(.btn-outline-secondary, .btn-text-secondary) {
  --bs-btn-color: var(--pl-quiet);
  --bs-btn-hover-color: var(--bs-heading-color);
  --bs-btn-active-color: var(--bs-heading-color);
}

.pl-auth .form-control::placeholder {
  color: var(--pl-placeholder);
  opacity: 1;
}

/* A disabled field here shows the account's own email: quieter than a live field, still easy to read. */
.pl-auth .form-control:disabled {
  color: var(--pl-quiet);
  -webkit-text-fill-color: var(--pl-quiet);
  opacity: 1;
}

.pl-auth .pl-state.bg-label-success {
  color: var(--pl-success-text) !important;
}

.pl-auth .pl-state.bg-label-secondary {
  color: var(--pl-quiet) !important;
}

.pl-auth .alert-warning {
  color: var(--pl-warning-text);
}

.pl-auth .alert-danger {
  color: var(--pl-danger-text);
}

.pl-auth .alert-success,
.pl-auth .text-success {
  color: var(--pl-success-text) !important;
}

/* ---------- Card and brand ---------- */

.pl-auth .app-brand-logo {
  font-size: 1.5rem;
  width: auto;
  height: auto;
}

.pl-auth .authentication-inner .card .app-brand {
  margin-block-end: 2rem;
}

.pl-auth .app-brand-text {
  font-size: 1.375rem;
  color: var(--bs-heading-color);
}

@media (max-width: 575.98px) {
  .pl-auth .authentication-inner > .card > .card-body {
    padding: 1.5rem 1.25rem;
  }
}

/* ---------- Headings and copy ---------- */

.pl-auth h1 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.375rem;
}

.pl-intro {
  margin-bottom: 1.5rem;
}

.pl-intro p {
  margin-bottom: 0;
  color: var(--bs-body-color);
}

.pl-auth h2 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.pl-auth h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

/* ---------- Fields ---------- */

.pl-field {
  margin-bottom: 1.25rem;
}

.pl-field .form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bs-heading-color);
  margin-bottom: 0.375rem;
}

.pl-hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--bs-body-color);
}

/* A field's own validation message, directly under it, in the danger colour. */
.pl-auth .field-validation-error {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--pl-danger-text);
}

.pl-auth .field-validation-valid {
  display: none;
}

.pl-auth .form-control.input-validation-error,
.pl-auth .input-group:has(.input-validation-error) .form-control,
.pl-auth .input-group:has(.input-validation-error) .input-group-text {
  border-color: var(--bs-danger);
}

/* While a field shows an error, the error replaces its hint. */
.pl-field:has(.field-validation-error) .pl-hint {
  display: none;
}

/* The validation summary: a tidy alert at the top of the form, hidden while it has nothing to say. */
.pl-summary.validation-summary-valid {
  display: none;
}

.pl-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-summary li + li {
  margin-top: 0.25rem;
}

/* ---------- Password fields: the show/hide button sits inside the field ---------- */

.pl-password .form-control {
  border-inline-end: 0;
}

/* Vuexy draws the group's focus ring with a ::before that covers the whole group; it must not take
   the button's clicks. */
.pl-password::before {
  pointer-events: none;
}

.pl-password-toggle {
  cursor: pointer;
  min-width: 2.75rem;
  justify-content: center;
  color: var(--bs-body-color);
}

.pl-password-toggle:hover {
  color: var(--bs-heading-color);
}

.pl-password-toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
  z-index: 5;
}

/* ---------- Buttons and links ---------- */

.pl-auth .btn {
  min-height: 2.375rem;
}

.pl-auth a:focus-visible,
.pl-auth .btn:focus-visible,
.pl-auth .form-check-input:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* "Remember me" on the left, "Forgot password?" on the right. */
.pl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.pl-row .form-check {
  margin: 0;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline-start: 0;
}

.pl-row .form-check .form-check-input {
  float: none;
  margin: 0;
}

.pl-row a,
.pl-alt a,
.pl-note a,
.pl-back {
  display: inline-block;
  padding-block: 0.125rem;
  min-height: 1.5rem;
}

/* The secondary action under the primary button. */
.pl-alt {
  margin: 1.5rem 0 0;
  text-align: center;
}

/* Smaller and muted, below the secondary action. */
.pl-note {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--bs-body-color);
}

.pl-back {
  font-size: 0.9375rem;
}

.pl-back i {
  margin-inline-end: 0.5rem;
  font-size: 0.8125rem;
}

/* ---------- Result pages: round icon, heading, a sentence or two, the next step ---------- */

.pl-result {
  text-align: center;
}

.pl-result p {
  color: var(--bs-body-color);
  margin-bottom: 1.5rem;
}

.pl-result .pl-intro {
  margin-bottom: 0;
}

.pl-result .pl-intro p {
  margin-bottom: 1.5rem;
}

.pl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  font-size: 1.375rem;
}

/* ---------- Alerts (status messages and model errors) ---------- */

.pl-auth .alert {
  font-size: 0.875rem;
  line-height: 1.45;
}

.pl-auth .alert p:last-child {
  margin-bottom: 0;
}

.pl-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.pl-alert > i {
  margin-top: 0.1875rem;
  flex: none;
}

.pl-alert > div {
  flex: 1;
  min-width: 0;
}

.pl-alert.alert-dismissible {
  padding-inline-end: 3rem;
}

/* ---------- Signed-in footer on the narrow pages ---------- */

.pl-auth-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.8125rem;
  color: var(--bs-body-color);
}

.pl-auth-account form {
  margin: 0;
  flex: none;
}

.pl-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Account pages (Manage): a wider card with a settings layout ---------- */

.pl-auth-wide {
  --bs-auth-basic-inner-max-width: 1040px;
}

.pl-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.pl-top .app-brand-link {
  display: inline-flex;
  align-items: center;
}

.pl-who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
  font-size: 0.8125rem;
  color: var(--bs-body-color);
}

.pl-who form {
  margin: 0;
  flex: none;
}

.pl-manage-head {
  margin-bottom: 1.75rem;
}

.pl-manage-head .pl-back {
  margin-bottom: 0.75rem;
}

.pl-manage-head h1 {
  margin-bottom: 0;
}

.pl-manage {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.pl-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 0.875rem;
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.pl-nav a i {
  width: 1rem;
  text-align: center;
  color: var(--bs-body-color);
}

.pl-nav a:hover {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 92%, var(--bs-primary));
  color: var(--bs-heading-color);
}

.pl-nav a.active {
  background-color: var(--pl-primary-fill);
  color: var(--bs-primary-contrast, #fff);
  box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--bs-primary-rgb), 0.3);
}

.pl-nav a.active i {
  color: inherit;
}

.pl-content {
  min-width: 0;
}

.pl-content > .pl-intro {
  margin-bottom: 1.5rem;
}

/* A comfortable width for forms and text in the content column. */
.pl-form {
  max-width: 28rem;
}

.pl-text {
  max-width: 38rem;
}

.pl-section + .pl-section {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--bs-border-color);
}

.pl-section > p {
  color: var(--bs-body-color);
  margin-bottom: 1rem;
  max-width: 38rem;
}

.pl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.pl-actions form {
  margin: 0;
}

/* Two-step status line and the verified badge on the email page. */
.pl-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 50rem;
}

/* Authenticator setup: numbered steps, the QR code and the key. */
.pl-steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 40rem;
}

.pl-steps > li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 2.75rem;
  padding-bottom: 1.5rem;
}

.pl-steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: -0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 84%, var(--bs-primary));
  color: var(--bs-primary);
}

.pl-steps > li:last-child {
  padding-bottom: 0;
}

.pl-steps p {
  margin-bottom: 0.75rem;
}

.pl-qr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* The QR code keeps a light quiet zone in both themes so authenticator apps can read it. */
#qrCode {
  flex: none;
  line-height: 0;
}

#qrCode img,
#qrCode canvas {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--bs-border-color);
}

.pl-key {
  min-width: 0;
}

.pl-key code {
  display: inline-block;
  margin: 0.25rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-heading-color);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  word-break: break-word;
  user-select: all;
}

/* Recovery codes: a tidy monospace grid. */
.pl-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 24rem;
  margin: 0 0 1rem;
  padding: 1rem;
  list-style: none;
  border-radius: var(--bs-border-radius);
  border: 1px dashed var(--bs-border-color);
  background-color: var(--bs-body-bg);
}

.pl-codes code {
  display: block;
  text-align: center;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--bs-heading-color);
  user-select: all;
}

@media (max-width: 767.98px) {
  .pl-manage {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  /* On a phone the navigation stacks above the content as rows of pills, so every item (and the
     current one) stays in view. */
  .pl-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .pl-nav a {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .pl-manage-head {
    margin-bottom: 1.25rem;
  }

  .pl-top {
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
  }

  .pl-who {
    width: 100%;
    justify-content: space-between;
  }
}

.pl-result .pl-note {
  margin-bottom: 0;
}

/* Comfortable targets: an alert's close button, and the plain links beside buttons ("Cancel"). */
.pl-auth .alert-dismissible .btn-close {
  box-sizing: content-box;
  padding: 0.375rem;
}

.pl-actions a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}