/* Password visibility toggle — all portals (public auth, client, admin) */

.password-field-wrap {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.password-field-wrap .form-control {
  box-sizing: border-box;
  max-width: 100%;
  padding-right: 3rem;
  width: 100%;
}

.password-toggle-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.375rem;
  color: var(--pw-toggle-color, rgba(255, 255, 255, 0.78));
  cursor: pointer;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  opacity: var(--pw-toggle-opacity, 0.92);
  padding: 0;
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  transition:
    color 0.15s ease,
    opacity 0.15s ease,
    background-color 0.15s ease;
  width: 2.25rem;
  z-index: 2;
}

.password-toggle-btn:hover {
  background: rgba(20, 200, 255, 0.1);
  color: var(--pw-toggle-color-hover, rgba(255, 255, 255, 0.98));
  opacity: 1;
}

.password-toggle-btn:focus-visible {
  background: rgba(20, 200, 255, 0.14);
  color: var(--pw-toggle-color-hover, #14c8ff);
  opacity: 1;
  outline: 2px solid var(--pw-toggle-focus, rgba(20, 200, 255, 0.65));
  outline-offset: 2px;
}

.password-toggle-btn svg {
  display: block;
  flex-shrink: 0;
  height: 1.25rem;
  width: 1.25rem;
}

/* Public auth — cyan accent on dark panel */
body.public-runway.p9-shell {
  --pw-toggle-color: rgba(255, 255, 255, 0.82);
  --pw-toggle-color-hover: #14c8ff;
  --pw-toggle-focus: rgba(20, 200, 255, 0.7);
  --pw-toggle-opacity: 0.95;
}

body.public-runway.p9-shell main.page-main.p9-content:not(.marketing-page) .password-field-wrap .form-control {
  padding-right: 3.15rem;
}

/* Client + admin workspace dark forms */
body:is(.client-portal, .admin-portal) {
  --pw-toggle-color: rgba(255, 255, 255, 0.8);
  --pw-toggle-color-hover: var(--cyan, #14c8ff);
  --pw-toggle-focus: var(--cyan-dim, rgba(20, 200, 255, 0.35));
  --pw-toggle-opacity: 0.94;
}