/* ─────────────────────────────────────────────────────────────────────────
 * IPSYSTEM v1.18.1 — Password toolkit styles
 * ─────────────────────────────────────────────────────────────────────────
 * Inline buttons positioned absolutely on the right of the password input.
 * Padding-right reserved on the input so typed text doesn't slide under
 * the buttons.
 * ─────────────────────────────────────────────────────────────────────────
 */
.pwd-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* Reserve space inside the input so text doesn't slide under buttons.
   - full mode (3 buttons): ~96px
   - view-only (2 buttons):  ~70px */
.pwd-wrap.pwd-mode-full     .pwd-input { padding-right: 96px !important; }
.pwd-wrap.pwd-mode-view-only .pwd-input { padding-right: 70px !important; }

.pwd-bar {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 1px;
  z-index: 2;
  pointer-events: auto;
}

.pwd-btn {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 5px 7px;
  height: 28px;
  width: 28px;
  border-radius: 5px;
  cursor: pointer;
  color: #878a99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .12s ease, color .12s ease;
  font-size: 15px;
  line-height: 1;
}
.pwd-btn:hover  { background: #eef2f7; color: #495057; }
.pwd-btn:active { background: #dde2eb; }
.pwd-btn:focus  { outline: 2px solid rgba(64, 81, 137, .25); outline-offset: 1px; }
.pwd-btn i      { font-size: 15px; line-height: 1; }

/* Button-specific colors on hover for affordance */
.pwd-btn-gen:hover  { color: #405189; }
.pwd-btn-view:hover { color: #0ab39c; }
.pwd-btn-copy:hover { color: #f7b84b; }

/* Toast: small floating message above input ("Copied", "Generated") */
.pwd-toast {
  position: absolute;
  top: -28px;
  right: 0;
  background: #0ab39c;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  z-index: 3;
}
.pwd-toast.show     { opacity: 1; transform: translateY(0); }
.pwd-toast-warn     { background: #f7b84b; color: #2e2a1d; }
.pwd-toast-ok       { /* default green — keep as-is */ }

/* RTL support — flip the bar to the left side for Arabic layouts */
[dir="rtl"] .pwd-wrap.pwd-mode-full     .pwd-input { padding-right: 12px !important; padding-left: 96px !important; }
[dir="rtl"] .pwd-wrap.pwd-mode-view-only .pwd-input { padding-right: 12px !important; padding-left: 70px !important; }
[dir="rtl"] .pwd-bar { right: auto; left: 6px; }
[dir="rtl"] .pwd-toast { right: auto; left: 0; }