.auth-card-wrap {
  width: 100%;
  max-width: 570px;
}

/* Shared dark navbar links used by the review and application portals. */
.nav-link-btn {
  color: #fff;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.nav-link-btn:hover,
.nav-link-btn:focus {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
}

.nav-link-btn.active {
  background-color: #fff;
  color: #1e293b;
}

/* Text-style POST logout button. Keeps logout visually aligned with normal links. */
.logout-button {
  border: 0;
  background: transparent;
  color: var(--bs-danger);
  font: inherit;
  line-height: inherit;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.logout-button:hover,
.logout-button:focus {
  color: var(--bs-danger);
  text-decoration: underline;
}

/* Compact icon-only actions used inside table rows. */
.table-icon-action {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 1;
}

.table-icon-action .bi {
  line-height: 1;
}

/*
 * Neutralize browser autofill/autocomplete styling globally (Chrome/Chromium
 * and Safari via :-webkit-autofill, Firefox via the unprefixed :autofill).
 *
 * `border-color: inherit` used to be set below for autofilled
 * .form-control/.form-select elements. border-color is not an inherited
 * property, so `inherit` copied the parent's unset value - the keyword
 * `currentcolor` - down to the input. That keyword then resolved against the
 * INPUT's own (dark) text colour rather than the parent's, so autofilled
 * fields rendered with a near-black border instead of Bootstrap's normal
 * neutral border-grey. Fixed below by setting an explicit neutral
 * border-color instead of inheriting one.
 *
 * Chrome also renders its own yellow/blue autofill background via a UA
 * box-shadow that keeps applying even while focused, so the focus-ring
 * rules below must layer the background-hiding inset shadow together with
 * Bootstrap's own focus/invalid/valid ring in a single box-shadow value
 * (box-shadow only accepts one value; declaring it twice would make the
 * second one win outright and drop the other).
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
input:autofill,
textarea:autofill,
select:autofill {
  -webkit-text-fill-color: var(--bs-body-color) !important;
  caret-color: var(--bs-body-color);
  transition: background-color 9999s ease-in-out 0s;
}

/* Not focused: hide the native autofill background and use the same
   neutral border as a normal field. is-invalid/is-valid fields keep their
   own Bootstrap border colour (set below), so they're excluded here. */
.form-control:-webkit-autofill:not(:focus),
.form-select:-webkit-autofill:not(:focus),
.form-control:autofill:not(:focus),
.form-select:autofill:not(:focus) {
  -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--bs-body-bg) inset !important;
}

.form-control:-webkit-autofill:not(:focus):not(.is-invalid):not(.is-valid),
.form-select:-webkit-autofill:not(:focus):not(.is-invalid):not(.is-valid),
.form-control:autofill:not(:focus):not(.is-invalid):not(.is-valid),
.form-select:autofill:not(:focus):not(.is-invalid):not(.is-valid) {
  border-color: var(--bs-border-color);
}

/* Focused, no validation state: keep hiding the autofill background but
   layer it under the same focus ring Bootstrap draws for
   `.form-control:focus` - border-color is left to that Bootstrap rule so
   the appearance matches exactly, with nothing hardcoded here. */
.form-control:-webkit-autofill:focus:not(.is-invalid):not(.is-valid),
.form-select:-webkit-autofill:focus:not(.is-invalid):not(.is-valid),
.form-control:autofill:focus:not(.is-invalid):not(.is-valid),
.form-select:autofill:focus:not(.is-invalid):not(.is-valid) {
  -webkit-box-shadow:
    0 0 0 1000px var(--bs-body-bg) inset,
    0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
  box-shadow:
    0 0 0 1000px var(--bs-body-bg) inset,
    0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Focused + is-invalid/is-valid: same background neutralization, layered
   under Bootstrap's red/green focus ring instead so validation state still
   takes precedence over autofill styling. */
.form-control.is-invalid:-webkit-autofill:focus,
.form-select.is-invalid:-webkit-autofill:focus,
.form-control.is-invalid:autofill:focus,
.form-select.is-invalid:autofill:focus {
  -webkit-box-shadow:
    0 0 0 1000px var(--bs-body-bg) inset,
    0 0 0 var(--bs-focus-ring-width)
      rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity));
  box-shadow:
    0 0 0 1000px var(--bs-body-bg) inset,
    0 0 0 var(--bs-focus-ring-width)
      rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity));
}

.form-control.is-valid:-webkit-autofill:focus,
.form-select.is-valid:-webkit-autofill:focus,
.form-control.is-valid:autofill:focus,
.form-select.is-valid:autofill:focus {
  -webkit-box-shadow:
    0 0 0 1000px var(--bs-body-bg) inset,
    0 0 0 var(--bs-focus-ring-width)
      rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity));
  box-shadow:
    0 0 0 1000px var(--bs-body-bg) inset,
    0 0 0 var(--bs-focus-ring-width)
      rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity));
}