/* Loaded site-wide (see every base.html) so the show/hide "eye" button
   that password-toggle.js adds to EVERY password field looks right,
   no matter which page it ends up on. */

.input-eye-wrap {
  position: relative;
}

.input-eye-wrap input {
  width: 100%;
  padding-right: 42px;
  box-sizing: border-box;
}

.eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  align-items: center;
  padding: 4px;
  transition: color 0.2s;
}

.eye-btn:hover,
.eye-btn:focus {
  color: #1650cd;
}

/* Small helper text under an input explaining a rule (e.g. password
   needing both letters and numbers). Used alongside .field-error, not
   instead of it. */
.field-hint {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* Generic "only this field is wrong" styling, used by forms that are
   not Django ModelForms (profile pages, admin create-user forms, etc).
   Safe to reuse alongside any page's own .form-group / .field-error
   classes since it only adds a border color. */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #1650cd;
}

.field-error {
  display: block;
  font-size: 12px;
  color: #1650cd;
  margin-top: 4px;
}