/* ===== PASSWORD VISIBILITY TOGGLE STYLES ===== */
/* Composant global pour afficher/masquer le mot de passe dans les formulaires */

/* Password Field Container */
.password-field-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-field-container .form-input,
.password-field-container .new-resource-input {
  width: 100%;
  padding-right: 45px;
}

/* Toggle Button */
.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8494A7;
  transition: color 0.2s ease;
}

.password-toggle-btn:hover {
  color: #22364D;
}

.password-toggle-btn:focus {
  outline: none;
}

.password-toggle-btn svg {
  width: 20px;
  height: 20px;
}

/* Hidden class for icon toggle */
.password-toggle-btn .hidden {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .password-toggle-btn {
    right: 10px;
  }
  
  .password-toggle-btn svg {
    width: 18px;
    height: 18px;
  }
  
  .password-field-container .form-input,
  .password-field-container .new-resource-input {
    padding-right: 40px;
  }
}